Form onChange
HTML
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.9.0/dijit/themes/claro/claro.css">
<div id="mySelect"></div>
CSS
.claro div.dijitMenuItem.apple, .claro div.dijitMenuItem.pear {
padding-left : 18px;
}
.claro div.dijitMenuItem.apple {
background : url(http://icons.iconarchive.com/icons/mad-science/yellow-submarine/16/APPLE-icon.png) left no-repeat;
}
.claro div.dijitMenuItem.pear{
background: #ddd !important;
color: red;
}
JavaScript
require(["dojo/aspect", "dojo/_base/declare", "dojo/dom-class", "dojo/query", "dojo/_base/array", "dijit/form/FilteringSelect", "dojo/store/Memory", "dijit/registry", "dojo/domReady!"], function(aspect, declare, domClass, query, array, FilteringSelect, Memory, registry){
window.registry = registry;
var store = new Memory({
data : [
{tags: "Fruits", label : "Fruits", value : "", disabled: 'disabled'},
{ tags: "Fruits - Apples", label : "Apples", value : "apples"},
{ tags: "Fruits - Banana", label : "Fruits Banana", value : "banana"},
{ tags: "Fruits - Peach", label : "Peach", value : "peach"},
{tags: "Animals", label : "Animals", value : ""},
{tags: "Animals - Dog", label : "Dog", value : "dogs"},
{tags: "Animals - Lion", label : "Lion", value : "lions"},
{tags: "Animals - Zebra", label : "Animals Zebra", value : "zebras"}
]
}),
select = new FilteringSelect({
id : "myContainer",
store : store,
labelAttr: "label",
queryExpr: "*${0}*",
searchAttr : "tags",
autoComplete: false,
fetchProperties : {
sort : [ { attribute : "tags" } ]
}
}, "mySelect");
select.on("search", function(){
var menuItems = query(".dijitMenuItem", select.dropDown.domNode);
console.log("search");
array.forEach(menuItems, function(menuItem){
menuItem.onClick = function(){alert('false')};
switch(menuItem.innerText){
case "Animals" :
domClass.add(menuItem, "apple");
break;
case "Pears" :
domClass.add(menuItem, "pear");
break;
}
});
});
select.startup();
console.log(select);
});