git.pond.sub.org Git - eow/blob - static/dojo-release-1.1.1/dijit/tests/form/test_FilteringSelect.html

   1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
   2                 "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4 <head>
   5         <title>Dojo FilteringSelect Widget Test</title>
   6
   7         <style type="text/css">
   8                 @import "../../../dojo/resources/dojo.css";
   9                 @import "../css/dijitTests.css";
  10         </style>
  11
  12         <script type="text/javascript" src="../../../dojo/dojo.js"
  13                 djConfig="isDebug: true, parseOnLoad: true"></script>
  14         <script type="text/javascript" src="../_testCommon.js"></script>
  15
  16         <script type="text/javascript">
  17                 dojo.require("dojo.data.ItemFileReadStore");
  18                 dojo.require("dijit.form.FilteringSelect");
  19                 dojo.require("dojo.parser");    // scan page for widgets and instantiate them
  20
  21                 function setValue(id, val){
  22                         dojo.byId(id).value=val;
  23                 }
  24
  25                 function myLabelFunc(item, store){
  26                         var label=store.getValue(item, 'name');
  27                         // DEMO: uncomment to chop off a character
  28                         //label=label.substr(0, label.length-1);
  29                         // DEMO: uncomment to set to lower case
  30                         label = label.toLowerCase();
  31                         return label;
  32                 }
  33         </script>
  34 </head>
  35
  36 <body>
  37         <h1 class="testTitle">Dojo FilteringSelect Widget Test</h1>
  38         <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore"
  39                 url="../_data/states.json"></div>
  40         <div dojoType="dojo.data.ItemFileReadStore" jsId="myStore2"
  41                 url="../_data/countries.json"></div>
  42         <p>The FilteringSelect widget is an enhanced version of HTML's &lt;select&gt; tag.</p>
  43         <p>Similar features:</p>
  44         <ul>
  45                 <li>There is a drop down list of possible values.</li>
  46                 <li>You can only enter a value from the drop down list.  (You can't enter an arbitrary value.)</li>
  47                 <li>The value submitted with the form is the hidden value (ex: CA),</li>
  48                 <li>not the displayed value a.k.a. label (ex: California)</li>
  49         </ul>
  50     <p></p>
  51
  52
  53         <p>Enhancements over plain HTML version:</p>
  54         <ul>
  55                 <li>If you type in some text then it will filter down the list of possible values in the drop down list.</li>
  56                 <li>List can be specified either as a static list or via a javascript function (that can get the list from a server)</li>
  57         </ul>
  58         <p></p>
  59
  60         <hr>
  61
  62         <form action="#" method="GET">
  63                 <p>FilteringSelect #1: inlined data, autoComplete=false:</p>
  64                 <label for="setvaluetest2">state list 1:</label>
  65                 <select dojoType="dijit.form.FilteringSelect"
  66                                 id="setvaluetest2"
  67                                 name="state1"
  68                                 autoComplete="false"
  69                                 invalidMessage="Invalid state name"
  70                                 onChange="dojo.byId('oc1').value=arguments[0]"
  71                                 onFocus="console.log('user focus handler')"
  72                                 onBlur="console.log('user blur handler')"
  73                 >
  74                         <option value="blank"></option>
  75                         <option value="AL">Alabama</option>
  76                         <option value="AK">Alaska</option>
  77                         <option value="AS">American Samoa</option>
  78                         <option value="AZ">Arizona</option>
  79                         <option value="AR">Arkansas</option>
  80                         <option value="AE">Armed Forces Europe</option>
  81                         <option value="AP">Armed Forces Pacific</option>
  82                         <option value="AA">Armed Forces the Americas</option>
  83                         <option value="CA" selected>California</option>
  84                         <option value="CO">Colorado</option>
  85                         <option value="CT">Connecticut</option>
  86                         <option value="DE">Delaware</option>
  87                         <option value="DC">District of Columbia</option>
  88                         <option value="FM">Federated States of Micronesia</option>
  89                         <option value="FL">Florida</option>
  90                         <option value="GA">Georgia</option>
  91                         <option value="GU">Guam</option>
  92                         <option value="HI">Hawaii</option>
  93                         <option value="ID">Idaho</option>
  94                         <option value="IL">Illinois</option>
  95                         <option value="IN">Indiana</option>
  96                         <option value="IA">Iowa</option>
  97                         <option value="KS">Kansas</option>
  98                         <option value="KY">Kentucky</option>
  99                         <option value="LA">Louisiana</option>
 100                         <option value="ME">Maine</option>
 101                         <option value="MH">Marshall Islands</option>
 102                         <option value="MD">Maryland</option>
 103                         <option value="MA">Massachusetts</option>
 104                         <option value="MI">Michigan</option>
 105                         <option value="MN">Minnesota</option>
 106                         <option value="MS">Mississippi</option>
 107                         <option value="MO">Missouri</option>
 108                         <option value="MT">Montana</option>
 109                         <option value="NE">Nebraska</option>
 110                         <option value="NV">Nevada</option>
 111                         <option value="NH">New Hampshire</option>
 112                         <option value="NJ">New Jersey</option>
 113                         <option value="NM">New Mexico</option>
 114                         <option value="NY">New York</option>
 115                         <option value="NC">North Carolina</option>
 116                         <option value="ND">North Dakota</option>
 117                         <option value="MP">Northern Mariana Islands</option>
 118                         <option value="OH">Ohio</option>
 119                         <option value="OK">Oklahoma</option>
 120                         <option value="OR">Oregon</option>
 121                         <option value="PA">Pennsylvania</option>
 122                         <option value="PR">Puerto Rico</option>
 123                         <option value="RI">Rhode Island</option>
 124                         <option value="SC">South Carolina</option>
 125                         <option value="SD">South Dakota</option>
 126                         <option value="TN">Tennessee</option>
 127                         <option value="TX">Texas</option>
 128                         <option value="UT">Utah</option>
 129                         <option value="VT">Vermont</option>
 130                         <option value="VI">Virgin Islands, U.S.</option>
 131                         <option value="VA">Virginia</option>
 132                         <option value="WA">Washington</option>
 133                         <option value="WV">West Virginia</option>
 134                         <option value="WI">Wisconsin</option>
 135                         <option value="WY">Wyoming</option>
 136                 </select>
 137                 onChange:<input id="oc1" disabled value="not fired yet!" autocomplete="off">
 138                 <input type="button" value="Set displayed value to Kentucky (valid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Kentucky')">
 139                 <input type="button" value="Set displayed value to Canada (invalid)" onClick="dijit.byId('setvaluetest2').setDisplayedValue('Canada')">
 140                 <hr>
 141
 142                 <div dojoType="dojo.data.ItemFileReadStore" jsId="stateStore"
 143                         url="../_data/states.json"></div>
 144
 145                 <p>FilteringSelect #2: url, autoComplete=true:</p>
 146                 <label for="setvaluetest">state list 2:</label>
 147                 <input searchAttr="name"
 148                                 id="setvaluetest"
 149                                 dojoType="dijit.form.FilteringSelect"
 150                                 store="stateStore"
 151                                 name="state2"
 152                                 autoComplete="true"
 153                                 onChange="setValue('value2', arguments[0]);"
 154                                 invalidMessage="Invalid state name"
 155                 >
 156                 <span>Value: <input id="value2" disabled></span>
 157
 158                 <p>FilteringSelect #3: url, autoComplete=false:</p>
 159                 <label for="state3">state list 3:</label>
 160                 <input searchAttr="name"
 161                                 id="state3"
 162                                 dojoType="dijit.form.FilteringSelect"
 163                                 value="VI"
 164                                 store="stateStore"
 165                                 name="state3"
 166                                 autoComplete="false"
 167                                 onChange="setValue('value3', arguments[0]);"
 168                                 invalidMessage="Invalid state name."
 169                 >
 170                 <span>Value: <input id="value3" disabled value="VI"></span>
 171                 <hr>
 172                 <p>FilteringSelect #5: custom labelFunc (value in textbox should be lower case when onChange is called), autoComplete=true:</p>
 173                 <label for="state5">state list 5:</label>
 174                 <input searchAttr="name"
 175                                 id="state5"
 176                                 dojoType="dijit.form.FilteringSelect"
 177                                 value="OR"
 178                                 labelFunc="myLabelFunc"
 179                                 store="stateStore"
 180                                 name="state5"
 181                                 autoComplete="true"
 182                                 labelAttr="label"
 183                                 labelType="html"
 184                                 dataProviderClass="dojo.data.ItemFileReadStore"
 185                                 promptMessage="Please enter a state"
 186                                 invalidMessage="Invalid state name."
 187                 >
 188                 <br>
 189                 <hr>
 190
 191                 <p>FilteringSelect #7: Input method editor Chinese characters</p>
 192                 <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>
 193                 <label for="state7">Chinese list:</label>
 194                 <select dojoType="dijit.form.FilteringSelect"
 195                         name="state7"
 196                         id="state7"
 197                 >
 198                         <option value="a" selected>&#38463;</option>
 199                         <option value="ba">&#25226;</option>
 200                 </select>
 201                 <br>
 202                 <hr>
 203                 <p>FilteringSelect #8: Japanese</p>
 204                 <p>Try typing 東、西、北、南  (north, south, east west) and a few choices will pop up.</p>
 205                 <label for="state8">Japanese list:</label>
 206                 <select name="state8" id="state8" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false"
 207                         onChange="setValue('value8', arguments[0]);">
 208                         <option value="nanboku">南北</option>
 209                         <option value="touzai">東西</option>
 210                         <option value="toukyou">東京</option>
 211                         <option value="higashiguchi">東口</option>
 212                         <option value="nishiguchi">西口</option>
 213                         <option value="minamiguchi">南口</option>
 214                         <option value="kitaguchi">北口</option>
 215                         <option value="higashiku">東区</option>
 216                         <option value="nishiku">西区</option>
 217                         <option value="minamiku">南区</option>
 218                         <option value="kitaku">北区</option>
 219                 </select>
 220                 <span>Value: <input id="value8" disabled value="nanboku"></span>
 221                 <hr>
 222                 <p>FilteringSelect #9: No data</p>
 223                 <p>This FilteringSelect has no options to choose from.  It should still load.</p>
 224                 <label for="state9">empty list:</label>
 225                 <select name="state9" id="state9" dojoType="dijit.form.FilteringSelect" style="width: 300px;" autoComplete="false">
 226                 </select>
 227                 <br>
 228                 <hr>
 229                 <p>FilteringSelect #10: hasDownArrow=false:</p>
 230                 <label for="state10">no arrow list:</label>
 231                 <input searchAttr="name"
 232                                 dojoType="dijit.form.FilteringSelect"
 233                                 value="AL"
 234                                 name="state10"
 235                                 id="state10"
 236                                 autoComplete="false"
 237                                 store="myStore"
 238                                 invalidMessage="Invalid state name."
 239                                 hasDownArrow="false"
 240                 >
 241                 <br>
 242                 <hr>
 243                 <div >
 244                 <p>FilteringSelect #11: deep data, initial query of type=country:</p>
 245                 <label for="state11">query list:</label>
 246                 <input searchAttr="name"
 247                                 dojoType="dijit.form.FilteringSelect"
 248                                 query={type:'country'}
 249                                 value="United States of America"
 250                                 name="state11"
 251                                 id="state11"
 252                                 autoComplete="false"
 253                                 store="myStore2"
 254                                 invalidMessage="Choose a country from the list."
 255                                 hasDownArrow="false"
 256                 >
 257                 <br>
 258                 <hr>
 259                 <p>FilteringSelect #12: special characters</p>
 260                 <p>The drop down list should be:</p>
 261                 <ul>
 262                    <li>sticks &amp; stones
 263                    <li>rags --&gt; riches
 264                    <li>more\less
 265                    <li>3 * 5
 266                 </ul>
 267                 <label for="filter12">Special chars:</label>
 268                 <select dojoType="dijit.form.FilteringSelect"
 269                         name="filter12"
 270                         id="filter12"
 271                 >
 272                         <option value="sticks" selected>sticks &amp; stones</option>
 273                         <option value="rags">rags --&gt; riches</option>
 274                         <option value="more">more\less</option>
 275                         <option value="times">3 * 5</option>
 276                 </select>
 277                 <br>
 278                 <hr>
 279                 <input type="submit">
 280         </form>
 281         <p>
 282                 this is some text below the combo boxes. It shouldn't get pushed out of
 283                 the way when search results get returned.  also: adding a simple combo
 284                 box to test IE bleed through problem:
 285         </p>
 286
 287         <select>
 288           <option>test for</option>
 289           <option">IE bleed through</option>
 290           <option>problem</option>
 291         </select>
 292
 293         <!-- maintain state of select if user presses back/forward button -->
 294         <form name="_dojo_form" style="display:none" disabled="true"><textarea name="stabile" cols="80" rows="10"></textarea></form>
 295 </body>
 296 </html>