Ticket #5034: test_FilteringSelect.html

File test_FilteringSelect.html, 9.6 kB (added by guest, 14 months ago)

modified dijit/tests/form/test_FilteringSelect.html (wraps first FilteringSelect? widget in <span> tag)

Line 
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 &lt;select&gt; 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                <span>
63                <select dojoType="dijit.form.FilteringSelect"
64                                id="setvaluetest2"
65                                name="state1"
66                                autoComplete="false"
67                                invalidMessage="Invalid state name"
68                                onChange="setValue('value1', arguments[0]);"
69                >
70                        <option value="blank"></option>
71                        <option value="AL">Alabama</option>
72                        <option value="AK">Alaska</option>
73                        <option value="AS">American Samoa</option>
74                        <option value="AZ">Arizona</option>
75                        <option value="AR">Arkansas</option>
76                        <option value="AE">Armed Forces Europe</option>
77                        <option value="AP">Armed Forces Pacific</option>
78                        <option value="AA">Armed Forces the Americas</option>
79                        <option value="CA" selected>California</option>
80                        <option value="CO">Colorado</option>
81                        <option value="CT">Connecticut</option>
82                        <option value="DE">Delaware</option>
83                        <option value="DC">District of Columbia</option>
84                        <option value="FM">Federated States of Micronesia</option>
85                        <option value="FL">Florida</option>
86                        <option value="GA">Georgia</option>
87                        <option value="GU">Guam</option>
88                        <option value="HI">Hawaii</option>
89                        <option value="ID">Idaho</option>
90                        <option value="IL">Illinois</option>
91                        <option value="IN">Indiana</option>
92                        <option value="IA">Iowa</option>
93                        <option value="KS">Kansas</option>
94                        <option value="KY">Kentucky</option>
95                        <option value="LA">Louisiana</option>
96                        <option value="ME">Maine</option>
97                        <option value="MH">Marshall Islands</option>
98                        <option value="MD">Maryland</option>
99                        <option value="MA">Massachusetts</option>
100                        <option value="MI">Michigan</option>
101                        <option value="MN">Minnesota</option>
102                        <option value="MS">Mississippi</option>
103                        <option value="MO">Missouri</option>
104                        <option value="MT">Montana</option>
105                        <option value="NE">Nebraska</option>
106                        <option value="NV">Nevada</option>
107                        <option value="NH">New Hampshire</option>
108                        <option value="NJ">New Jersey</option>
109                        <option value="NM">New Mexico</option>
110                        <option value="NY">New York</option>
111                        <option value="NC">North Carolina</option>
112                        <option value="ND">North Dakota</option>
113                        <option value="MP">Northern Mariana Islands</option>
114                        <option value="OH">Ohio</option>
115                        <option value="OK">Oklahoma</option>
116                        <option value="OR">Oregon</option>
117                        <option value="PA">Pennsylvania</option>
118                        <option value="PR">Puerto Rico</option>
119                        <option value="RI">Rhode Island</option>
120                        <option value="SC">South Carolina</option>
121                        <option value="SD">South Dakota</option>
122                        <option value="TN">Tennessee</option>
123                        <option value="TX">Texas</option>
124                        <option value="UT">Utah</option>
125                        <option value="VT">Vermont</option>
126                        <option value="VI">Virgin Islands, U.S.</option>
127                        <option value="VA">Virginia</option>
128                        <option value="WA">Washington</option>
129                        <option value="WV">West Virginia</option>
130                        <option value="WI">Wisconsin</option>
131                        <option value="WY">Wyoming</option>
132                </select>
133                </span>
134                <span>Value: <input id="value1" disabled value="CA"></span>
135                <input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')">
136                <input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')">
137                <hr>
138
139                <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
140                        url="../_data/states.json"></div>
141
142                <p>FilteringSelect #2: url, autoComplete=true:</p>
143                <label for="setvaluetest">state list 2:</label>
144                <input searchAttr="name"
145                                id="setvaluetest"
146                                dojoType="dijit.form.FilteringSelect"
147                                store="stateStore"
148                                name="state2"
149                                autoComplete="true"
150                                onChange="setValue('value2', arguments[0]);"
151                                invalidMessage="Invalid state name"
152                >
153                <span>Value: <input id="value2" disabled></span>
154
155                <p>FilteringSelect #3: url, autoComplete=false:</p>
156                <label for="state3">state list 3:</label>
157                <input searchAttr="name"
158                                id="state3"
159                                dojoType="dijit.form.FilteringSelect"
160                                value="VI"
161                                store="stateStore"
162                                name="state3"
163                                autoComplete="false"
164                                onChange="setValue('value3', arguments[0]);"
165                                invalidMessage="Invalid state name."
166                >
167                <span>Value: <input id="value3" disabled value="VI"></span>
168                <hr>
169                <p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p>
170                <label for="state5">state list 5:</label>
171                <input searchAttr="name"
172                                id="state5"
173                                dojoType="dijit.form.FilteringSelect"
174                                value="OR"
175                                labelFunc="myLabelFunc"
176                                store="stateStore"
177                                name="state5"
178                                autoComplete="true"
179                                labelAttr="label"
180                                labelType="html"
181                                dataProviderClass="dojo.data.ItemFileReadStore"
182                                promptMessage="Please enter a state"
183                                invalidMessage="Invalid state name."
184                >
185                <br>
186                <hr>
187
188                <p>FilteringSelect #7: Input method editor Chinese characters</p>
189                <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 &#38463; (a) or &#25226; (ba).</p>
190                <label for="state7">Chinese list:</label>
191                <select dojoType="dijit.form.FilteringSelect"
192                        name="state7"
193                        id="state7"
194                >
195                        <option value="a" selected>&#38463;</option>
196                        <option value="ba">&#25226;</option>
197                </select>
198                <br>
199                <hr>
200                <p>FilteringSelect #8: Japanese</p>
201                <p>Try typing ???????  (north, south, east west) and a few choices will pop up.</p>
202                <label for="state8">Japanese list:</label>
203                <select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"
204                        onChange="setValue('value8', arguments[0]);">
205                        <option value="nanboku">??</option>
206                        <option value="touzai">??</option>
207                        <option value="toukyou">??</option>
208                        <option value="higashiguchi">??</option>
209                        <option value="nishiguchi">??</option>
210                        <option value="minamiguchi">??</option>
211                        <option value="kitaguchi">??</option>
212                        <option value="higashiku">??</option>
213                        <option value="nishiku">??</option>
214                        <option value="minamiku">??</option>
215                        <option value="kitaku">??</option>
216                </select>
217                <span>Value: <input id="value8" disabled value="nanboku"></span>
218                <hr>
219                <p>FilteringSelect #9: No data</p>
220                <p>This FilteringSelect has no options to choose from.  It should still load.</p>
221                <label for="state9">empty list:</label>
222                <select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false">
223                </select>
224                <br>
225                <hr>
226                <p>FilteringSelect #10: hasDownArrow=false:</p>
227                <label for="state10">no arrow list:</label>
228                <input searchAttr="name"
229                                dojoType="dijit.form.FilteringSelect"
230                                value="AL"
231                                name="state10"
232                                id="state10"
233                                autoComplete="false"
234                                store="myStore"
235                                invalidMessage="Invalid state name."
236                                hasDownArrow="false"
237                >
238                <br>
239                <hr>
240                <div >
241                <p>FilteringSelect #11: deep data, initial query of type=country:</p>
242                <label for="state11">query list:</label>
243                <input searchAttr="name"
244                                dojoType="dijit.form.FilteringSelect"
245                                query={type:'country'}
246                                value="United States of America"
247                                name="state11"
248                                id="state11"
249                                autoComplete="false"
250                                store="myStore2"
251                                invalidMessage="Choose a country from the list."
252                                hasDownArrow="false"
253                >
254                <br>
255                <hr>
256                <input type="submit">
257        </form>
258        <p>
259                this is some text below the combo boxes. It shouldn't get pushed out of
260                the way when search results get returned.  also: adding a simple combo
261                box to test IE bleed through problem:
262        </p>
263
264        <select>
265          <option>test for</option>
266          <option">IE bleed through</option>
267          <option>problem</option>
268        </select>
269
270        <!-- maintain state of select if user presses back/forward button -->
271        <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
272</body>
273</html>