diff options
Diffstat (limited to 'includes/js/dijit/tests/form/test_FilteringSelect.html')
| -rw-r--r-- | includes/js/dijit/tests/form/test_FilteringSelect.html | 296 |
1 files changed, 296 insertions, 0 deletions
diff --git a/includes/js/dijit/tests/form/test_FilteringSelect.html b/includes/js/dijit/tests/form/test_FilteringSelect.html new file mode 100644 index 0000000..d40af13 --- /dev/null +++ b/includes/js/dijit/tests/form/test_FilteringSelect.html @@ -0,0 +1,296 @@ +<!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> |