Archive for the ‘dojo’ Category
Autocomplete with Dojo FilteringSelect Widget
May 20, 2013
Leave a comment
This code fills a FilteringSelect with data received from the server in JSON format. The requests start after having more than 4 characters in the textbox field.
require(["dijit/form/TextBox", "dojo/store/Cache", "dojo/store/Memory", "dijit/form/FilteringSelect", "dojo/store/JsonRest"], function(ready, Cache, Memory, FilteringSelect, JsonRest){ var leStore = Cache(JsonRest({ target : "/path/*", idProperty: "id" }), Memory()); var testStore = new Memory({data: []}); dojo.ready(function(){ var filt_sel = new FilteringSelect({ id: "el_id", name: "el_id", hasDownArrow: false, invalidMessage: "No element found", searchAttr: "NAME", queryExpr: "${0}", store: testStore, pageSize: 10, labelAttr: "label", labelType: "html", onKeyUp: function(value){ if(dojo.byId("el_id").value.length > 4 && dijit.byId("el_id").get("store") == testStore) dijit.byId("el_id").set("store", leStore); if(dojo.byId("el_id").value.length <= 4 && dijit.byId("el_id").get("store") == leStore) dijit.byId("el_id").set("store", testStore); }, onChange: function(value){ dojo.byId('search').click(); } }, "el_id"); }); });
JSON format from the server:
[{"NAME":"Andres","id":"00000000","label":"<h3>00000000<\/h3>\tAndres Vargas"}, {"NAME":"Jose","id":"11111111","label":"<h3>11111111<\/h3>\tJose Mourinho"}, {"NAME":"Scott","id":"22222222","label":"<h3>22222222<\/h3>\tScott Bonen"}, {"NAME":"Paulina","id":"33333333","label":"<h3>33333333<\/h3>\tPaulina Gonzalez"}, {"NAME":"Leticia","id":"44444444","label":"<h3>44444444<\/h3>\tLeticia Ortiz"}, {"NAME":"Alejandra","id":"55555555","label":"<h3>55555555<\/h3>\tAlejandra Gonzalez"}]
Categories: dojo, javascript
autocomplete, dijit, filteringselect