dojo - 如何使用自定义 FilteringSelect 返回修改后的项目

Question

我正在为自定义 FilteringSelect 小部件商店中的项目添加标签属性，以便它们显示为带有图标。

var data = this.store.data;
for ( var i = 0; i < data.length; i++ ) {
    data[i].label = data[i].needsIcon ? "<div class='labelIcon'></div> " : "";
    data[i].label += data[i].value;
}

This is all good for displaying the icon in front of items in the dropdown, but when an item is selected, the label is now part of the object. 有没有办法修改自定义小部件，使其返回没有“标签”属性的项目：

var myItem = customSelectWidget.item; // How to return the item without "label"???

Answer 1

也许你可以像这样使用一些 dom 操作：（见这个小提琴）

select = new FilteringSelect({
    id : "myContainer",
    store : store,
    searchAttr : "label"
}, "mySelect");

select.on("search", function(){
    var menuItems = query(".dijitMenuItem", select.dropDown.domNode);
    array.forEach(menuItems, function(menuItem){
            switch(menuItem.innerText){
            case  "Apples" :
                domClass.add(menuItem, "apple");
                break;
            case "Pears" :
                domClass.add(menuItem, "pear");
                break;
            }
    });
});

然后使用 css 类自定义 menuItem 节点，例如：

.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 : url(http://icons.iconarchive.com/icons/iconicon/veggies/16/pear-icon.png) left no-repeat; 
}