--- /dev/null
+<!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("dojo.data.ItemFileReadStore");
+ dojo.require("dijit.form.FilteringSelect");
+ dojo.require("dojo.parser"); // scan page for widgets and instantiate them
+
+ function 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 case
+ label = 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]"
+ onFocus="console.log('user focus handler')"
+ onBlur="console.log('user blur handler')"
+ >
+ <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>
+ <p>FilteringSelect #12: special characters</p>
+ <p>The drop down list should be:</p>
+ <ul>
+ <li>sticks & stones
+ <li>rags --> riches
+ <li>more\less
+ <li>3 * 5
+ </ul>
+ <label for="filter12">Special chars:</label>
+ <select dojoType="dijit.form.FilteringSelect"
+ name="filter12"
+ id="filter12"
+ >
+ <option value="sticks" selected>sticks & stones</option>
+ <option value="rags">rags --> riches</option>
+ <option value="more">more\less</option>
+ <option value="times">3 * 5</option>
+ </select>
+ <br>
+ <hr>
+ <input type="submit">
+ </form>
+ <p>
+ this is some text below the combo boxes. It shouldn't get pushed out of
+ the way when search results get returned. also: adding a simple combo
+ box 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>
projects / eow / blobdiff