wangdaping
/
wp


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271
							<!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>