jquery - 自动完成类别，项目自定义样式

Question

我对 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);
    };

致谢。

Answer 1

我自己解决了。

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

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

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