自动完成类别，项目自定义样式答案

【问题标题】：Autocomplete with categories, item custom style自动完成类别，项目自定义样式
【发布时间】：2013-09-06 15:09:15
【问题描述】：

我对 JqueryUI 和 JQuery 很陌生，但设法弄清楚如何使用类别获取自动完成功能。

现在我想进一步构建我的解决方案，我不知道是否可行。

基本上我希望文本框上的“下拉菜单”-ITEM（框中的一项，而不是类别）具有两种不同的样式。

我想要这个：

<li class="ui-menu-item" role="presentation">
    <a id="ui-id-28" class="ui-corner-all" tabindex="-1">I want it all</a>
    <a class="mycssclass"> by Queen</a>
</li>

注意额外的锚点（最后在

元素）和我想使用的 cssclass（更改字体、颜色等）

我应该对 widget-catcomplete 函数做一些操作（追加）吗？

这是我的 Jquery：

$.widget("custom.catcomplete", $.ui.autocomplete, {
    _renderMenu: function (ul, items) {
        var that = this,
          currentCategory = "";
        $.each(items, function (index, item) {
            if (item.category != currentCategory) {
                ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>");
                currentCategory = item.category;
            }
            that._renderItemData(ul, item);          
        });
    }
});

$(function () {
    $("#ListenToInput").catcomplete({
        delay:0,
        source: function (request, response) {
            $.get("http://ws.spotify.com/search/1/track.json", { // Call Spotify WebService (JSON)
                //currently selected in input
                q: request.term //query for search
            }, function (data) {                
                response($.map(data.tracks.slice(0, 5), function (item) {
                    return { label: item.name, by: item.artists[0].name, category: "Track" }; 
                    // returns five items of [{label: "Name"}{by: "Artist"}{category: "Track"}]             
                }));
            });
        }
    });
});

我怀疑我应该对这条线做点什么？？：

that._renderItemData(ul, item);

更新：我对 _renderItem 方法进行了覆盖，但不知何故这弄乱了“menuclick”事件。项目的价值未定义，不知道解决办法。

$.ui.autocomplete.prototype._renderItem = function (ul, item) {
        item.value = item.label +" - " + item.by;
        return $("<li>")
            .append($("<a>").text(item.label)
            .append($("<a class='customclass'>").text(item.by)))
            .appendTo(ul);
    };

谢谢。

【问题讨论】：

请提供jsfiddle
jsfiddle.net/3qgN3/2 - 这是一个 JSFiddle 但是！它自己解决了，我不知道如何，也许是因为函数在一个文档就绪函数中？

标签： jquery jquery-ui autocomplete styles

【解决方案1】：

我自己解决了。

这是解决方案： http://jsfiddle.net/3qgN3/2/

我认为这是因为函数位于文档就绪函数中。

$(document).ready(function () {
     //Functions in OP was moved outside
});

【讨论】：