Home > dojo, javascript > Autocomplete with Dojo FilteringSelect Widget

Autocomplete with Dojo FilteringSelect Widget

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"}]
Advertisements
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: