+++ /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