JavaScript Tutorial/Dojo toolkit/FilteringSelect

Материал из Web эксперт
Перейти к: навигация, поиск

dijit.form.FilteringSelect

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
      dojo.require("dojo.parser");
       dojo.require("dijit.form.FilteringSelect");
    </script>
  </head>
  <body class="tundra">
         <select dojoType="dijit.form.FilteringSelect" name="countryName" autocomplete="true" value="sel">
                <option value="sel" selected="selected">0</option>
                <option value="1" >1</option>
                <option value="2" >2</option>
                <option value="3" >3</option>
                <option value="4" >4</option>
                <option value="5" >5</option>
                <option value="6" >6</option>
                <option value="7" >7</option>
                <option value="8" >8</option>
                <option value="9" >9</option>
                <option value="10" >10</option>
                <option value="11" >11</option>
                <option value="12" >12</option>
        </select>
  </body>
</html>


Use dijit.form.FilteringSelect to create an auto-complete list

<html>
  <head>
    <link rel="StyleSheet" type="text/css"
      href="js/dojo/dijit/themes/tundra/tundra.css">
    <script type="text/javascript">
      var djConfig = {
        baseScriptUri : "js/dojo/",
        parseOnLoad : true
      };
    </script>
    <script type="text/javascript" src="js/dojo/dojo/dojo.js"></script>
    <script>
   dojo.require("dojo.parser");
        dojo.require("dijit.form.FilteringSelect");
    </script>
  </head>
  <body class="tundra">
   Press A please.
   <select dojoType="dijit.form.FilteringSelect" name="sname" autocomplete="false" value="Vinod">
      <option value="A">A</option>
      <option value="A2">A2</option>
      <option value="A3">A3</option>
      <option value="A4">A4</option>
      <option value="A5">A5</option>
      <option value="A6">A6</option>
      <option value="A7">A7</option>
    </select>
    </div>
  </body>
</html>