Blame | Last modification | View Log | RSS feed
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http://www.w3.org/TR/html4/strict.dtd"><html><head><title>Dojo FilteringSelect Widget Test</title><style type="text/css">@import "../../../dojo/resources/dojo.css";@import "../css/dijitTests.css";</style><script type="text/javascript" src="../../../dojo/dojo.js"djConfig="isDebug: true, parseOnLoad: true"></script><script type="text/javascript" src="../_testCommon.js"></script><script type="text/javascript">dojo.require("dijit.form.FilteringSelect");dojo.require("dojo.parser"); // scan page for widgets and instantiate themfunction setValue(id, val){dojo.byId(id).value=val;}function myLabelFunc(item, store){var label=store.getValue(item, 'name');// DEMO: uncomment to chop off a character//label=label.substr(0, label.length-1);// DEMO: uncomment to set to lower caselabel = label.toLowerCase();return label;}</script></head><body><h1 class="testTitle">Dojo FilteringSelect Widget Test</h1><div dojoType="dojo.data.ItemFileReadStore" jsId="myStore"url="../_data/states.json"></div><div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2"url="../_data/countries.json"></div><p>The FilteringSelect widget is an enhanced version of HTML's <select> tag.</p><p>Similar features:</p><ul><li>There is a drop down list of possible values.</li><li>You can only enter a value from the drop down list. (You can't enter an arbitrary value.)</li><li>The value submitted with the form is the hidden value (ex: CA),</li><li>not the displayed value a.k.a. label (ex: California)</li></ul><p></p><p>Enhancements over plain HTML version:</p><ul><li>If you type in some text then it will filter down the list of possible values in the drop down list.</li><li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li></ul><p></p><hr><form action="#" method="GET"><p>FilteringSelect #1: inlined data, autoComplete=false:</p><label for="setvaluetest2">state list 1:</label><select dojoType="dijit.form.FilteringSelect"id="setvaluetest2"name="state1"autoComplete="false"invalidMessage="Invalid state name"onChange="dojo.byId('oc1').value=arguments[0]"><option value="blank"></option><option value="AL">Alabama</option><option value="AK">Alaska</option><option value="AS">American Samoa</option><option value="AZ">Arizona</option><option value="AR">Arkansas</option><option value="AE">Armed Forces Europe</option><option value="AP">Armed Forces Pacific</option><option value="AA">Armed Forces the Americas</option><option value="CA" selected>California</option><option value="CO">Colorado</option><option value="CT">Connecticut</option><option value="DE">Delaware</option><option value="DC">District of Columbia</option><option value="FM">Federated States of Micronesia</option><option value="FL">Florida</option><option value="GA">Georgia</option><option value="GU">Guam</option><option value="HI">Hawaii</option><option value="ID">Idaho</option><option value="IL">Illinois</option><option value="IN">Indiana</option><option value="IA">Iowa</option><option value="KS">Kansas</option><option value="KY">Kentucky</option><option value="LA">Louisiana</option><option value="ME">Maine</option><option value="MH">Marshall Islands</option><option value="MD">Maryland</option><option value="MA">Massachusetts</option><option value="MI">Michigan</option><option value="MN">Minnesota</option><option value="MS">Mississippi</option><option value="MO">Missouri</option><option value="MT">Montana</option><option value="NE">Nebraska</option><option value="NV">Nevada</option><option value="NH">New Hampshire</option><option value="NJ">New Jersey</option><option value="NM">New Mexico</option><option value="NY">New York</option><option value="NC">North Carolina</option><option value="ND">North Dakota</option><option value="MP">Northern Mariana Islands</option><option value="OH">Ohio</option><option value="OK">Oklahoma</option><option value="OR">Oregon</option><option value="PA">Pennsylvania</option><option value="PR">Puerto Rico</option><option value="RI">Rhode Island</option><option value="SC">South Carolina</option><option value="SD">South Dakota</option><option value="TN">Tennessee</option><option value="TX">Texas</option><option value="UT">Utah</option><option value="VT">Vermont</option><option value="VI">Virgin Islands, U.S.</option><option value="VA">Virginia</option><option value="WA">Washington</option><option value="WV">West Virginia</option><option value="WI">Wisconsin</option><option value="WY">Wyoming</option></select>onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off"><input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')"><input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')"><hr><div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"url="../_data/states.json"></div><p>FilteringSelect #2: url, autoComplete=true:</p><label for="setvaluetest">state list 2:</label><input searchAttr="name"id="setvaluetest"dojoType="dijit.form.FilteringSelect"store="stateStore"name="state2"autoComplete="true"onChange="setValue('value2', arguments[0]);"invalidMessage="Invalid state name"><span>Value: <input id="value2" disabled></span><p>FilteringSelect #3: url, autoComplete=false:</p><label for="state3">state list 3:</label><input searchAttr="name"id="state3"dojoType="dijit.form.FilteringSelect"value="VI"store="stateStore"name="state3"autoComplete="false"onChange="setValue('value3', arguments[0]);"invalidMessage="Invalid state name."><span>Value: <input id="value3" disabled value="VI"></span><hr><p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p><label for="state5">state list 5:</label><input searchAttr="name"id="state5"dojoType="dijit.form.FilteringSelect"value="OR"labelFunc="myLabelFunc"store="stateStore"name="state5"autoComplete="true"labelAttr="label"labelType="html"dataProviderClass="dojo.data.ItemFileReadStore"promptMessage="Please enter a state"invalidMessage="Invalid state name."><br><hr><p>FilteringSelect #7: Input method editor Chinese characters</p><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><label for="state7">Chinese list:</label><select dojoType="dijit.form.FilteringSelect"name="state7"id="state7"><option value="a" selected>阿</option><option value="ba">把</option></select><br><hr><p>FilteringSelect #8: Japanese</p><p>Try typing 東、西、北、南 (north, south, east west) and a few choices will pop up.</p><label for="state8">Japanese list:</label><select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"onChange="setValue('value8', arguments[0]);"><option value="nanboku">南北</option><option value="touzai">東西</option><option value="toukyou">東京</option><option value="higashiguchi">東口</option><option value="nishiguchi">西口</option><option value="minamiguchi">南口</option><option value="kitaguchi">北口</option><option value="higashiku">東区</option><option value="nishiku">西区</option><option value="minamiku">南区</option><option value="kitaku">北区</option></select><span>Value: <input id="value8" disabled value="nanboku"></span><hr><p>FilteringSelect #9: No data</p><p>This FilteringSelect has no options to choose from. It should still load.</p><label for="state9">empty list:</label><select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"></select><br><hr><p>FilteringSelect #10: hasDownArrow=false:</p><label for="state10">no arrow list:</label><input searchAttr="name"dojoType="dijit.form.FilteringSelect"value="AL"name="state10"id="state10"autoComplete="false"store="myStore"invalidMessage="Invalid state name."hasDownArrow="false"><br><hr><div ><p>FilteringSelect #11: deep data, initial query of type=country:</p><label for="state11">query list:</label><input searchAttr="name"dojoType="dijit.form.FilteringSelect"query={type:'country'}value="United States of America"name="state11"id="state11"autoComplete="false"store="myStore2"invalidMessage="Choose a country from the list."hasDownArrow="false"><br><hr><input type="submit"></form><p>this is some text below the combo boxes. It shouldn't get pushed out ofthe way when search results get returned. also: adding a simple combobox to test IE bleed through problem:</p><select><option>test for</option><option">IE bleed through</option><option>problem</option></select><!-- maintain state of select if user presses back/forward button --><form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form></body></html>