Question

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

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

Basiclly我希望文本框中的“下拉”-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
});

自动填写类别，项目自定义样式

1 个答案: