Saturday, January 4, 2014

How to open the menu of a DOJO Filtering Select widget

Just another Dojo example, nothing special, just for self-reference.

Create your dojo filtering select programmatically or declaratively. Then in your javascipt code use the Filtering Select's _startSearchFromInput or _startSearchAll method, depending on if you want the result list to show the type-ahead matches or if you want to show all values.

Here's an example of a declarative way of creating your filtering select widget for 'year' values.

	<!-- Dojo Filtering Select -->
	<select name="year" id="year" dojoType='dijit.form.FilteringSelect'>
		<option value="Year" selected="selected">YEAR</option>

The 'year' values for this filtering select will be populated by ajax.  See the javascript code below.

function buildYearFilteringSelect() {
	//fetch the 'YEAR' options
	var yearFS = dijit.byId("year"); = 0;
	var xhrArgs = {
    	    url: "AjaxGetYearJSONURL",
    	    handleAs: "json",
    	    preventCache: true,    	
    	    content: {
                "retrieveType": "YEAR"
    	    error: function (error) { 
    	    load: function (data) {
        	if(data.items != null && data.items.length > 0){	
[0] = new Option("YEAR", "Year");   			
        		for(var i=1;i<data.items.length;i++){
	   [] = 
	      	   	 		new Option(data.items[i].value, data.items[i].value);
			//use dojo.connect to call the _startSearchAll() method when the _onConnect event is triggered on the filtering select widget
			//then call the select() and focus() methods to automatically open the filtering select's menu
   			dojo.connect(yearFS, '_onConnect', function (val) {

No comments:

Post a Comment