想要在 dojo 中创建一个组合框，其中只有在用户输入 4 个字符后才会启动下拉菜单和自动完成功能 [英] Want to create a combobox in dojo where the dropdown menu and autocompletion kicks in only after the user inputs 4 characters

问题描述

我想在 dojo 中创建一个组合框，其中只有在用户输入 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.有一个 minlength 标志，可以设置它返回一个布尔值.或者，您可以使用正则表达式:`dojox.validate.regexp，它可以在同一页面上找到.这是使用 minlength 标志的示例.这不是最优雅的解决方案(如果组合框具有自动完成限制来启用/禁用也会更好)，但它说明了如何为 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>

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