| 2150 |
mathias |
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
|
|
|
2 |
"http://www.w3.org/TR/html4/strict.dtd">
|
|
|
3 |
<html>
|
|
|
4 |
<head>
|
|
|
5 |
<title>Dojo FilteringSelect Widget Test</title>
|
|
|
6 |
<style type="text/css">
|
|
|
7 |
@import "../../../dojo/resources/dojo.css";
|
|
|
8 |
@import "../css/dijitTests.css";
|
|
|
9 |
</style>
|
|
|
10 |
<script type="text/javascript" src="../../../dojo/dojo.js"
|
|
|
11 |
djConfig="isDebug: true, parseOnLoad: true"></script>
|
|
|
12 |
<script type="text/javascript" src="../_testCommon.js"></script>
|
|
|
13 |
|
|
|
14 |
<script type="text/javascript">
|
|
|
15 |
dojo.require("dijit.form.FilteringSelect");
|
|
|
16 |
dojo.require("dojo.parser"); // scan page for widgets and instantiate them
|
|
|
17 |
|
|
|
18 |
function setValue(id, val){
|
|
|
19 |
dojo.byId(id).value=val;
|
|
|
20 |
}
|
|
|
21 |
|
|
|
22 |
function myLabelFunc(item, store){
|
|
|
23 |
var label=store.getValue(item, 'name');
|
|
|
24 |
// DEMO: uncomment to chop off a character
|
|
|
25 |
//label=label.substr(0, label.length-1);
|
|
|
26 |
// DEMO: uncomment to set to lower case
|
|
|
27 |
label = label.toLowerCase();
|
|
|
28 |
return label;
|
|
|
29 |
}
|
|
|
30 |
</script>
|
|
|
31 |
</head>
|
|
|
32 |
|
|
|
33 |
<body>
|
|
|
34 |
<h1 class="testTitle">Dojo FilteringSelect Widget Test</h1>
|
|
|
35 |
<div dojoType="dojo.data.ItemFileReadStore" jsId="myStore"
|
|
|
36 |
url="../_data/states.json"></div>
|
|
|
37 |
<div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2"
|
|
|
38 |
url="../_data/countries.json"></div>
|
|
|
39 |
<p>The FilteringSelect widget is an enhanced version of HTML's <select> tag.</p>
|
|
|
40 |
<p>Similar features:</p>
|
|
|
41 |
<ul>
|
|
|
42 |
<li>There is a drop down list of possible values.</li>
|
|
|
43 |
<li>You can only enter a value from the drop down list. (You can't enter an arbitrary value.)</li>
|
|
|
44 |
<li>The value submitted with the form is the hidden value (ex: CA),</li>
|
|
|
45 |
<li>not the displayed value a.k.a. label (ex: California)</li>
|
|
|
46 |
</ul>
|
|
|
47 |
<p></p>
|
|
|
48 |
|
|
|
49 |
|
|
|
50 |
<p>Enhancements over plain HTML version:</p>
|
|
|
51 |
<ul>
|
|
|
52 |
<li>If you type in some text then it will filter down the list of possible values in the drop down list.</li>
|
|
|
53 |
<li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li>
|
|
|
54 |
</ul>
|
|
|
55 |
<p></p>
|
|
|
56 |
|
|
|
57 |
<hr>
|
|
|
58 |
|
|
|
59 |
<form action="#" method="GET">
|
|
|
60 |
<p>FilteringSelect #1: inlined data, autoComplete=false:</p>
|
|
|
61 |
<label for="setvaluetest2">state list 1:</label>
|
|
|
62 |
<select dojoType="dijit.form.FilteringSelect"
|
|
|
63 |
id="setvaluetest2"
|
|
|
64 |
name="state1"
|
|
|
65 |
autoComplete="false"
|
|
|
66 |
invalidMessage="Invalid state name"
|
|
|
67 |
onChange="dojo.byId('oc1').value=arguments[0]"
|
|
|
68 |
>
|
|
|
69 |
<option value="blank"></option>
|
|
|
70 |
<option value="AL">Alabama</option>
|
|
|
71 |
<option value="AK">Alaska</option>
|
|
|
72 |
<option value="AS">American Samoa</option>
|
|
|
73 |
<option value="AZ">Arizona</option>
|
|
|
74 |
<option value="AR">Arkansas</option>
|
|
|
75 |
<option value="AE">Armed Forces Europe</option>
|
|
|
76 |
<option value="AP">Armed Forces Pacific</option>
|
|
|
77 |
<option value="AA">Armed Forces the Americas</option>
|
|
|
78 |
<option value="CA" selected>California</option>
|
|
|
79 |
<option value="CO">Colorado</option>
|
|
|
80 |
<option value="CT">Connecticut</option>
|
|
|
81 |
<option value="DE">Delaware</option>
|
|
|
82 |
<option value="DC">District of Columbia</option>
|
|
|
83 |
<option value="FM">Federated States of Micronesia</option>
|
|
|
84 |
<option value="FL">Florida</option>
|
|
|
85 |
<option value="GA">Georgia</option>
|
|
|
86 |
<option value="GU">Guam</option>
|
|
|
87 |
<option value="HI">Hawaii</option>
|
|
|
88 |
<option value="ID">Idaho</option>
|
|
|
89 |
<option value="IL">Illinois</option>
|
|
|
90 |
<option value="IN">Indiana</option>
|
|
|
91 |
<option value="IA">Iowa</option>
|
|
|
92 |
<option value="KS">Kansas</option>
|
|
|
93 |
<option value="KY">Kentucky</option>
|
|
|
94 |
<option value="LA">Louisiana</option>
|
|
|
95 |
<option value="ME">Maine</option>
|
|
|
96 |
<option value="MH">Marshall Islands</option>
|
|
|
97 |
<option value="MD">Maryland</option>
|
|
|
98 |
<option value="MA">Massachusetts</option>
|
|
|
99 |
<option value="MI">Michigan</option>
|
|
|
100 |
<option value="MN">Minnesota</option>
|
|
|
101 |
<option value="MS">Mississippi</option>
|
|
|
102 |
<option value="MO">Missouri</option>
|
|
|
103 |
<option value="MT">Montana</option>
|
|
|
104 |
<option value="NE">Nebraska</option>
|
|
|
105 |
<option value="NV">Nevada</option>
|
|
|
106 |
<option value="NH">New Hampshire</option>
|
|
|
107 |
<option value="NJ">New Jersey</option>
|
|
|
108 |
<option value="NM">New Mexico</option>
|
|
|
109 |
<option value="NY">New York</option>
|
|
|
110 |
<option value="NC">North Carolina</option>
|
|
|
111 |
<option value="ND">North Dakota</option>
|
|
|
112 |
<option value="MP">Northern Mariana Islands</option>
|
|
|
113 |
<option value="OH">Ohio</option>
|
|
|
114 |
<option value="OK">Oklahoma</option>
|
|
|
115 |
<option value="OR">Oregon</option>
|
|
|
116 |
<option value="PA">Pennsylvania</option>
|
|
|
117 |
<option value="PR">Puerto Rico</option>
|
|
|
118 |
<option value="RI">Rhode Island</option>
|
|
|
119 |
<option value="SC">South Carolina</option>
|
|
|
120 |
<option value="SD">South Dakota</option>
|
|
|
121 |
<option value="TN">Tennessee</option>
|
|
|
122 |
<option value="TX">Texas</option>
|
|
|
123 |
<option value="UT">Utah</option>
|
|
|
124 |
<option value="VT">Vermont</option>
|
|
|
125 |
<option value="VI">Virgin Islands, U.S.</option>
|
|
|
126 |
<option value="VA">Virginia</option>
|
|
|
127 |
<option value="WA">Washington</option>
|
|
|
128 |
<option value="WV">West Virginia</option>
|
|
|
129 |
<option value="WI">Wisconsin</option>
|
|
|
130 |
<option value="WY">Wyoming</option>
|
|
|
131 |
</select>
|
|
|
132 |
onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
|
|
|
133 |
<input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')">
|
|
|
134 |
<input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')">
|
|
|
135 |
<hr>
|
|
|
136 |
|
|
|
137 |
<div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
|
|
|
138 |
url="../_data/states.json"></div>
|
|
|
139 |
|
|
|
140 |
<p>FilteringSelect #2: url, autoComplete=true:</p>
|
|
|
141 |
<label for="setvaluetest">state list 2:</label>
|
|
|
142 |
<input searchAttr="name"
|
|
|
143 |
id="setvaluetest"
|
|
|
144 |
dojoType="dijit.form.FilteringSelect"
|
|
|
145 |
store="stateStore"
|
|
|
146 |
name="state2"
|
|
|
147 |
autoComplete="true"
|
|
|
148 |
onChange="setValue('value2', arguments[0]);"
|
|
|
149 |
invalidMessage="Invalid state name"
|
|
|
150 |
>
|
|
|
151 |
<span>Value: <input id="value2" disabled></span>
|
|
|
152 |
|
|
|
153 |
<p>FilteringSelect #3: url, autoComplete=false:</p>
|
|
|
154 |
<label for="state3">state list 3:</label>
|
|
|
155 |
<input searchAttr="name"
|
|
|
156 |
id="state3"
|
|
|
157 |
dojoType="dijit.form.FilteringSelect"
|
|
|
158 |
value="VI"
|
|
|
159 |
store="stateStore"
|
|
|
160 |
name="state3"
|
|
|
161 |
autoComplete="false"
|
|
|
162 |
onChange="setValue('value3', arguments[0]);"
|
|
|
163 |
invalidMessage="Invalid state name."
|
|
|
164 |
>
|
|
|
165 |
<span>Value: <input id="value3" disabled value="VI"></span>
|
|
|
166 |
<hr>
|
|
|
167 |
<p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p>
|
|
|
168 |
<label for="state5">state list 5:</label>
|
|
|
169 |
<input searchAttr="name"
|
|
|
170 |
id="state5"
|
|
|
171 |
dojoType="dijit.form.FilteringSelect"
|
|
|
172 |
value="OR"
|
|
|
173 |
labelFunc="myLabelFunc"
|
|
|
174 |
store="stateStore"
|
|
|
175 |
name="state5"
|
|
|
176 |
autoComplete="true"
|
|
|
177 |
labelAttr="label"
|
|
|
178 |
labelType="html"
|
|
|
179 |
dataProviderClass="dojo.data.ItemFileReadStore"
|
|
|
180 |
promptMessage="Please enter a state"
|
|
|
181 |
invalidMessage="Invalid state name."
|
|
|
182 |
>
|
|
|
183 |
<br>
|
|
|
184 |
<hr>
|
|
|
185 |
|
|
|
186 |
<p>FilteringSelect #7: Input method editor Chinese characters</p>
|
|
|
187 |
<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>
|
|
|
188 |
<label for="state7">Chinese list:</label>
|
|
|
189 |
<select dojoType="dijit.form.FilteringSelect"
|
|
|
190 |
name="state7"
|
|
|
191 |
id="state7"
|
|
|
192 |
>
|
|
|
193 |
<option value="a" selected>阿</option>
|
|
|
194 |
<option value="ba">把</option>
|
|
|
195 |
</select>
|
|
|
196 |
<br>
|
|
|
197 |
<hr>
|
|
|
198 |
<p>FilteringSelect #8: Japanese</p>
|
|
|
199 |
<p>Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.</p>
|
|
|
200 |
<label for="state8">Japanese list:</label>
|
|
|
201 |
<select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"
|
|
|
202 |
onChange="setValue('value8', arguments[0]);">
|
|
|
203 |
<option value="nanboku">南北</option>
|
|
|
204 |
<option value="touzai">東西</option>
|
|
|
205 |
<option value="toukyou">東京</option>
|
|
|
206 |
<option value="higashiguchi">東口</option>
|
|
|
207 |
<option value="nishiguchi">西口</option>
|
|
|
208 |
<option value="minamiguchi">南口</option>
|
|
|
209 |
<option value="kitaguchi">北口</option>
|
|
|
210 |
<option value="higashiku">東区</option>
|
|
|
211 |
<option value="nishiku">西区</option>
|
|
|
212 |
<option value="minamiku">南区</option>
|
|
|
213 |
<option value="kitaku">北区</option>
|
|
|
214 |
</select>
|
|
|
215 |
<span>Value: <input id="value8" disabled value="nanboku"></span>
|
|
|
216 |
<hr>
|
|
|
217 |
<p>FilteringSelect #9: No data</p>
|
|
|
218 |
<p>This FilteringSelect has no options to choose from. It should still load.</p>
|
|
|
219 |
<label for="state9">empty list:</label>
|
|
|
220 |
<select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false">
|
|
|
221 |
</select>
|
|
|
222 |
<br>
|
|
|
223 |
<hr>
|
|
|
224 |
<p>FilteringSelect #10: hasDownArrow=false:</p>
|
|
|
225 |
<label for="state10">no arrow list:</label>
|
|
|
226 |
<input searchAttr="name"
|
|
|
227 |
dojoType="dijit.form.FilteringSelect"
|
|
|
228 |
value="AL"
|
|
|
229 |
name="state10"
|
|
|
230 |
id="state10"
|
|
|
231 |
autoComplete="false"
|
|
|
232 |
store="myStore"
|
|
|
233 |
invalidMessage="Invalid state name."
|
|
|
234 |
hasDownArrow="false"
|
|
|
235 |
>
|
|
|
236 |
<br>
|
|
|
237 |
<hr>
|
|
|
238 |
<div >
|
|
|
239 |
<p>FilteringSelect #11: deep data, initial query of type=country:</p>
|
|
|
240 |
<label for="state11">query list:</label>
|
|
|
241 |
<input searchAttr="name"
|
|
|
242 |
dojoType="dijit.form.FilteringSelect"
|
|
|
243 |
query={type:'country'}
|
|
|
244 |
value="United States of America"
|
|
|
245 |
name="state11"
|
|
|
246 |
id="state11"
|
|
|
247 |
autoComplete="false"
|
|
|
248 |
store="myStore2"
|
|
|
249 |
invalidMessage="Choose a country from the list."
|
|
|
250 |
hasDownArrow="false"
|
|
|
251 |
>
|
|
|
252 |
<br>
|
|
|
253 |
<hr>
|
|
|
254 |
<input type="submit">
|
|
|
255 |
</form>
|
|
|
256 |
<p>
|
|
|
257 |
this is some text below the combo boxes. It shouldn't get pushed out of
|
|
|
258 |
the way when search results get returned. also: adding a simple combo
|
|
|
259 |
box to test IE bleed through problem:
|
|
|
260 |
</p>
|
|
|
261 |
|
|
|
262 |
<select>
|
|
|
263 |
<option>test for</option>
|
|
|
264 |
<option">IE bleed through</option>
|
|
|
265 |
<option>problem</option>
|
|
|
266 |
</select>
|
|
|
267 |
|
|
|
268 |
<!-- maintain state of select if user presses back/forward button -->
|
|
|
269 |
<form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
|
|
|
270 |
</body>
|
|
|
271 |
</html>
|