想要在dojo中创建一个组合框,其中只有在用户输入4个字符后才会显示下拉菜单和自动完成功能

时间:2012-02-06 00:03:16

标签: autocomplete combobox dojo

我想在dojo中创建一个组合框,其中下拉菜单和自动完成仅在用户输入3个字符后启动。当前默认设置将开始显示下拉菜单,并在用户输入第一个字符时自动完成。

是否有任何获取此行为的属性?我能超载一些功能吗?或者我应该自己编写一个单独的小部件吗?

1 个答案:

答案 0 :(得分:1)

我可以指出正确的方向:在此处导航到API页面:http://dojotoolkit.org/api/
并查找dojox.validate.isText.可以设置一个minlength标志,返回一个布尔值。或者,您可以使用正则表达式:`dojox.validate.regexp,可以在同一页面上找到。这是使用minlength标志的示例。这不是最优雅的解决方案(如果comboBox具有启用/禁用的autoComplete约束也会更好),但它说明了如何为dojo小部件设置属性。

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dijit/themes/tundra/tundra.css"media="screen"/>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dojo/dojo.js"type="text/javascript" ></script>
<script type="text/javascript">
       dojo.require("dojo.parser");
       dojo.require("dijit.form.ComboBox");
       dojo.require("dojo.store.Memory");
       dojo.require("dojox.validate._base");
       dojo.require("dijit.form.Form");
       dojo.require("dijit.form.Button");

       var myBox, myForm, myButton, mainStore, altStore, test;
       test = false;

       dojo.ready(function(){
           buildForm();
       });

       function buildForm(){

           //use this store for your data
           mainStore = new dojo.store.Memory({
               data: [
                   {name:"Alabama", id:"AL"},
                   {name:"Alaska", id:"AK"},
                   {name:"American Samoa", id:"AS"},
                   {name:"Arizona", id:"AZ"},
                   {name:"Arkansas", id:"AR"},
                   {name:"Armed Forces Europe", id:"AE"},
                   {name:"Armed Forces Pacific", id:"AP"},
                   {name:"Armed Forces the Americas", id:"AA"},
                   {name:"California", id:"CA"},
                   {name:"Colorado", id:"CO"},
                   {name:"Connecticut", id:"CT"},
                   {name:"Delaware", id:"DE"}
               ]
           });
           //bind comboBox to an empty store until validation criteria met
           altStore = new dojo.store.Memory({
              data: []
           });

           //the comboBox needs to be contained in a form to work
            myForm = new dijit.form.Form({
               encType: 'multipart/form-data',
               onSubmit: function(e){if(!myForm.validate())dojo.stopEvent(e);}
           }, dojo.doc.createElement('div'));

           //programmatically create the combobox
           myBox = new dijit.form.ComboBox({
               id: "myComboBox",
               name: "state",
               store: altStore,
               searchAttr:"name"
           });

           myButton = new dijit.form.Button({
               id: "comboBoxButton",
               label: "get value",
               onClick: function(){alert(dijit.byId('myComboBox').get('value'));}

           });

           //attach dijit elements the form and the form to the webpage
           myForm.domNode.appendChild(myBox.domNode);
           myForm.domNode.appendChild(myButton.domNode);
           dojo.byId("myDiv").appendChild(myForm.domNode);

           //event listener to check comboBox for minimum text length
           myBox.on("KeyPress", function(){
               test = dojox.validate.isText(dojo.byId("myComboBox").value, {minlength: 2});
               if (test){
                   myBox.store = mainStore;
               }
               if(!test){
                   myBox.store = altStore;
               }
           });
       }
   </script>
</head>
<body>
    <div id="myDiv" class="tundra" ></div>
</body>