Want to create a combobox in dojo where the dropdown menu and autocompletion kicks in only after the user inputs 4 characters

问题

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 ?

回答1:

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>

来源：https://stackoverflow.com/questions/9154281/want-to-create-a-combobox-in-dojo-where-the-dropdown-menu-and-autocompletion-kic

标签

autocomplete

combobox

dojo