Page MenuHomeCode
Files F884090

test_FilteringSelect.html
No OneTemporary
Actions

test_FilteringSelect.html
View Options

<!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 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 &lt;select&gt; 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 &#38463; (a) or &#25226; (ba).</p>
<label for="state7">Chinese list:</label>
<select dojoType="dijit.form.FilteringSelect"
name="state7"
id="state7"
>
<option value="a" selected>&#38463;</option>
<option value="ba">&#25226;</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 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>

File Metadata

Mime Type
text/html
Expires
Sun, Apr 6, 10:24 (1 w, 6 d ago)
Storage Engine
blob
Storage Format
Raw Data
Storage Handle
26901
Default Alt Text
test_FilteringSelect.html (9 KB)

Event Timeline