Archive

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"}]