1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
2 "http://www.w3.org/TR/html4/strict.dtd">
5 <title>Dojo FilteringSelect Widget Test</title>
7 <style type="text/css">
8 @import "../../../dojo/resources/dojo.css";
9 @import "../css/dijitTests.css";
12 <script type="text/javascript" src="../../../dojo/dojo.js"
13 djConfig="isDebug: true, parseOnLoad: true"></script>
14 <script type="text/javascript" src="../_testCommon.js"></script>
16 <script type="text/javascript">
17 dojo.require("dojo.data.ItemFileReadStore");
18 dojo.require("dijit.form.FilteringSelect");
19 dojo.require("dojo.parser"); // scan page for widgets and instantiate them
21 function setValue(id, val){
22 dojo.byId(id).value=val;
25 function myLabelFunc(item, store){
26 var label=store.getValue(item, 'name');
27 // DEMO: uncomment to chop off a character
28 //label=label.substr(0, label.length-1);
29 // DEMO: uncomment to set to lower case
30 label = label.toLowerCase();
37 <h1 class="testTitle">Dojo FilteringSelect Widget Test</h1>
38 <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore"
39 url="../_data/states.json"></div>
40 <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2"
41 url="../_data/countries.json"></div>
42 <p>The FilteringSelect widget is an enhanced version of HTML's <select> tag.</p>
43 <p>Similar features:</p>
45 <li>There is a drop down list of possible values.</li>
46 <li>You can only enter a value from the drop down list. (You can't enter an arbitrary value.)</li>
47 <li>The value submitted with the form is the hidden value (ex: CA),</li>
48 <li>not the displayed value a.k.a. label (ex: California)</li>
53 <p>Enhancements over plain HTML version:</p>
55 <li>If you type in some text then it will filter down the list of possible values in the drop down list.</li>
56 <li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li>
62 <form action="#" method="GET">
63 <p>FilteringSelect #1: inlined data, autoComplete=false:</p>
64 <label for="setvaluetest2">state list 1:</label>
65 <select dojoType="dijit.form.FilteringSelect"
69 invalidMessage="Invalid state name"
70 onChange="dojo.byId('oc1').value=arguments[0]"
71 onFocus="console.log('user focus handler')"
72 onBlur="console.log('user blur handler')"
74 <option value="blank"></option>
75 <option value="AL">Alabama</option>
76 <option value="AK">Alaska</option>
77 <option value="AS">American Samoa</option>
78 <option value="AZ">Arizona</option>
79 <option value="AR">Arkansas</option>
80 <option value="AE">Armed Forces Europe</option>
81 <option value="AP">Armed Forces Pacific</option>
82 <option value="AA">Armed Forces the Americas</option>
83 <option value="CA" selected>California</option>
84 <option value="CO">Colorado</option>
85 <option value="CT">Connecticut</option>
86 <option value="DE">Delaware</option>
87 <option value="DC">District of Columbia</option>
88 <option value="FM">Federated States of Micronesia</option>
89 <option value="FL">Florida</option>
90 <option value="GA">Georgia</option>
91 <option value="GU">Guam</option>
92 <option value="HI">Hawaii</option>
93 <option value="ID">Idaho</option>
94 <option value="IL">Illinois</option>
95 <option value="IN">Indiana</option>
96 <option value="IA">Iowa</option>
97 <option value="KS">Kansas</option>
98 <option value="KY">Kentucky</option>
99 <option value="LA">Louisiana</option>
100 <option value="ME">Maine</option>
101 <option value="MH">Marshall Islands</option>
102 <option value="MD">Maryland</option>
103 <option value="MA">Massachusetts</option>
104 <option value="MI">Michigan</option>
105 <option value="MN">Minnesota</option>
106 <option value="MS">Mississippi</option>
107 <option value="MO">Missouri</option>
108 <option value="MT">Montana</option>
109 <option value="NE">Nebraska</option>
110 <option value="NV">Nevada</option>
111 <option value="NH">New Hampshire</option>
112 <option value="NJ">New Jersey</option>
113 <option value="NM">New Mexico</option>
114 <option value="NY">New York</option>
115 <option value="NC">North Carolina</option>
116 <option value="ND">North Dakota</option>
117 <option value="MP">Northern Mariana Islands</option>
118 <option value="OH">Ohio</option>
119 <option value="OK">Oklahoma</option>
120 <option value="OR">Oregon</option>
121 <option value="PA">Pennsylvania</option>
122 <option value="PR">Puerto Rico</option>
123 <option value="RI">Rhode Island</option>
124 <option value="SC">South Carolina</option>
125 <option value="SD">South Dakota</option>
126 <option value="TN">Tennessee</option>
127 <option value="TX">Texas</option>
128 <option value="UT">Utah</option>
129 <option value="VT">Vermont</option>
130 <option value="VI">Virgin Islands, U.S.</option>
131 <option value="VA">Virginia</option>
132 <option value="WA">Washington</option>
133 <option value="WV">West Virginia</option>
134 <option value="WI">Wisconsin</option>
135 <option value="WY">Wyoming</option>
137 onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
138 <input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')">
139 <input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')">
142 <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
143 url="../_data/states.json"></div>
145 <p>FilteringSelect #2: url, autoComplete=true:</p>
146 <label for="setvaluetest">state list 2:</label>
147 <input searchAttr="name"
149 dojoType="dijit.form.FilteringSelect"
153 onChange="setValue('value2', arguments[0]);"
154 invalidMessage="Invalid state name"
156 <span>Value: <input id="value2" disabled></span>
158 <p>FilteringSelect #3: url, autoComplete=false:</p>
159 <label for="state3">state list 3:</label>
160 <input searchAttr="name"
162 dojoType="dijit.form.FilteringSelect"
167 onChange="setValue('value3', arguments[0]);"
168 invalidMessage="Invalid state name."
170 <span>Value: <input id="value3" disabled value="VI"></span>
172 <p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p>
173 <label for="state5">state list 5:</label>
174 <input searchAttr="name"
176 dojoType="dijit.form.FilteringSelect"
178 labelFunc="myLabelFunc"
184 dataProviderClass="dojo.data.ItemFileReadStore"
185 promptMessage="Please enter a state"
186 invalidMessage="Invalid state name."
191 <p>FilteringSelect #7: Input method editor Chinese characters</p>
192 <p>Using an input method editor (see <a href="http://www.microsoft.com/windows/ie/ie6/downloads/recommended/ime/default.mspx">IME</a> for Windows) try typing 阿 (a) or 把 (ba).</p>
193 <label for="state7">Chinese list:</label>
194 <select dojoType="dijit.form.FilteringSelect"
198 <option value="a" selected>阿</option>
199 <option value="ba">把</option>
203 <p>FilteringSelect #8: Japanese</p>
204 <p>Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.</p>
205 <label for="state8">Japanese list:</label>
206 <select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"
207 onChange="setValue('value8', arguments[0]);">
208 <option value="nanboku">南北</option>
209 <option value="touzai">東西</option>
210 <option value="toukyou">東京</option>
211 <option value="higashiguchi">東口</option>
212 <option value="nishiguchi">西口</option>
213 <option value="minamiguchi">南口</option>
214 <option value="kitaguchi">北口</option>
215 <option value="higashiku">東区</option>
216 <option value="nishiku">西区</option>
217 <option value="minamiku">南区</option>
218 <option value="kitaku">北区</option>
220 <span>Value: <input id="value8" disabled value="nanboku"></span>
222 <p>FilteringSelect #9: No data</p>
223 <p>This FilteringSelect has no options to choose from. It should still load.</p>
224 <label for="state9">empty list:</label>
225 <select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false">
229 <p>FilteringSelect #10: hasDownArrow=false:</p>
230 <label for="state10">no arrow list:</label>
231 <input searchAttr="name"
232 dojoType="dijit.form.FilteringSelect"
238 invalidMessage="Invalid state name."
244 <p>FilteringSelect #11: deep data, initial query of type=country:</p>
245 <label for="state11">query list:</label>
246 <input searchAttr="name"
247 dojoType="dijit.form.FilteringSelect"
248 query={type:'country'}
249 value="United States of America"
254 invalidMessage="Choose a country from the list."
259 <p>FilteringSelect #12: special characters</p>
260 <p>The drop down list should be:</p>
262 <li>sticks & stones
263 <li>rags --> riches
267 <label for="filter12">Special chars:</label>
268 <select dojoType="dijit.form.FilteringSelect"
272 <option value="sticks" selected>sticks & stones</option>
273 <option value="rags">rags --> riches</option>
274 <option value="more">more\less</option>
275 <option value="times">3 * 5</option>
279 <input type="submit">
282 this is some text below the combo boxes. It shouldn't get pushed out of
283 the way when search results get returned. also: adding a simple combo
284 box to test IE bleed through problem:
288 <option>test for</option>
289 <option">IE bleed through</option>
290 <option>problem</option>
293 <!-- maintain state of select if user presses back/forward button -->
294 <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>