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.
<div> <!-- Dojo Filtering Select --> <select name="year" id="year" dojoType='dijit.form.FilteringSelect'> <option value="Year" selected="selected">YEAR</option> </select> </div>
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");
yearFS.store.root.options.length = 0;
var xhrArgs = {
url: "AjaxGetYearJSONURL",
handleAs: "json",
preventCache: true,
content: {
"retrieveType": "YEAR"
},
error: function (error) {
errorHandle(error);
},
load: function (data) {
if(data.items != null && data.items.length > 0){
yearFS.store.root.options[0] = new Option("YEAR", "Year");
for(var i=1;i<data.items.length;i++){
yearFS.store.root.options[yearFS.store.root.options.length] =
new Option(data.items[i].value, data.items[i].value);
}
yearFS.attr('value','Year');
yearFS.attr('displayedValue','YEAR');
//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) {
yearFS._startSearchAll();
document.getElementById('year').select();
}
yearFS.focus();
}
}
};
dojo.xhrGet(xhrArgs);
}
No comments:
Post a Comment