Хотите создать комбинированный список в Dojo, где выпадающее меню и автозаполнение появляются только после того, как пользователь введет 4 символа - PullRequest
Новая
       14

Хотите создать комбинированный список в Dojo, где выпадающее меню и автозаполнение появляются только после того, как пользователь введет 4 символа

2 голосов
/ 06 февраля 2012

Я хотел создать комбинированный список в dojo, где выпадающее меню и автозаполнение включаются только после того, как пользователь введет 3 символа. Текущее значение по умолчанию начнет показывать выпадающее меню, а также автозаполнение, когда пользователь вводит первый символ.

Есть ли какие-либо атрибуты для получения этого поведения? Могу ли я перегрузить некоторые функции? Или я должен написать отдельный собственный виджет?

1 Ответ

1 голос
/ 06 февраля 2012

Я могу указать вам правильное направление: перейдите на страницу API здесь: http://dojotoolkit.org/api/
и посмотрите вверх dojox.validate.isText. Существует флаг minlength, который можно установить, который возвращает логическое значение.Или вы можете использовать регулярные выражения: `dojox.validate.regexp, которые можно найти на той же странице.Вот пример использования флага минимальной длины.Это не самое элегантное решение (было бы также лучше, если бы comboBox имел ограничение автозаполнения для включения / выключения), но оно иллюстрирует, как можно устанавливать атрибуты для виджетов 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>
...