Monday, May 13, 2013

Creating autocomplete text box in DOJO

Using DOJO combobox, you can create a autocomplete functionality. Below code creates a programmatic combobox and assigns a json store to combobox. A declarative input form element is used a placeholder on page.

1:  <script type="text/javascript">   
2:  require([  
3:  "dojo/ready", "dojo/store/JsonRest", "dijit/form/ComboBox"], function(ready, JsonRest, ComboBox)  
4:  {    
5:    var jsonStore = new JsonRest  
6:     ({  
7:        target: "URL for Ajax service"  
8:     });  
9:     var comboBox = new ComboBox(  
10:     {  
11:        id: "SomeUniqueID",  
12:        name: "SomeUniqueName",  
13:        value: "",  
14:        store: jsonStore,  
15:        pageSize: 3,  
16:        searchAttr: "key",  
17:        queryExpr: "${0}"  
18:     }, "StoreItemSelect");  
19:    comboBox.startup();   
20:  });   
21:  </script>  
22:  <body>  
23:     <input id="StoreItemSelect"/>  
24:  <body>  

The AJAX service should return items in below json format

 [{key: "Autocomplete value 1"},{key: "Autocomplete value 2"},{key: "Autocomplete value 3"}]  

No comments:

Post a Comment