想在道场创建一个组合框，其中仅在用户输入4个字符后的下拉菜单，自动完成踢 [英] Want to create a combobox in dojo where the dropdown menu and autocompletion kicks in only after the user inputs 4 characters

问题描述

我想在道场创建一个组合框，其中的下拉菜单，并自动完成踢3个字符只有用户输入后。当前默认将开始显示下拉菜单，当用户输入的第一个字符也自动填充。

I wanted to create a combobox in dojo where the drop down menu and autocompletion kicks in only after the user inputs 3 characters. The current default will start showing the drop down menu and also autocomplete when the user enters the first character.

有没有获得此行为的任何属性？我可以重载某些功能？或者我应该写我自己的一个独立部件？

Are there any attributes for getting this behaviour ? can i overload some functions ? Or should i write a separate widget of my own ?

推荐答案

我可以指出你在正确的方向：导航到这里的API页面：的 http://dojotoolkit.org/api/ 结果
并期待 dojox.validate.isText。有可以设置一个返回boolean值的 MINLENGTH个标记。或者，你可以使用常规的前pressions：它可以在同一页面上找到`dojox.validate.regexp 。下面是使用的标志MINLENGTH的一个例子。这不是最优雅的解决方案（它也将是更好的如果ComboBox有一个自动完成克制，启用/禁用），但它说明了如何属性可以为Dojo小部件进行设置。

I can point you in the right direction: navigate to the API page here: http://dojotoolkit.org/api/
and look up dojox.validate.isText.There is a minlength flag that can be set that returns a boolean. Or, you could use regular expressions: `dojox.validate.regexpwhich can be found on the same page. Here's an example of using the minlength flag. It's not the most elegant solution(it would also be better if the comboBox had an autoComplete restraint to enable/disable), but it illustrates how attributes can be set for dojo widgets.

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

这篇关于想在道场创建一个组合框，其中仅在用户输入4个字符后的下拉菜单，自动完成踢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！