带有_renderItem和类别的jQuery自动完成 [英] jQuery Autocomplete with _renderItem and categories

问题描述

作为jQuery的新手，我想知道是否有可能同时使jQuery _renderItem(用于自定义列表项HTML/CSS)和类别协同工作.

As a newb to jQuery I'm wondering if it's possible to have both jQuery _renderItem (for custom list item HTML/CSS) and the categories working together in harmony.

我的_renderItem工作得很好，但我不知道如何将类别纳入组合.

I've got my _renderItem working great but I have no idea how to incorporate categories into the mix.

到目前为止，我的代码:

My code so far:

$(document).ready(function () {
$(':input[data-autocomplete]').each(function () {
    $(':input[data-autocomplete]').autocomplete({
        source: $(this).attr("data-autocomplete")
    }).data("autocomplete")._renderItem = function (ul, item) {
        var MyHtml = "<a>" + "<div class='ac' >" +                        
                     "<div class='ac_img_wrap' >" +
                     '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                     "</div>" +
                     "<div class='ac_mid' >" +
                     "<div class='ac_name' >" + item.value + "</div>" +
                     "<div class='ac_info' >" + item.info + "</div>" +
                     "</div>" +
                     "</div>" + "</a>";
        return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
    };
});
});

有关自动完成功能的jQuery文档提供了以下代码示例:

The jQuery documentation for the autocomplete gives the following code example:

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

我想让我的自定义HTML _renderItem和类别一起使用，有人可以帮助我将这两者合并在一起或为我指明正确的方向吗?

I'd like to get my custom HTML _renderItem and categories working together, can anyone help me to merge these two together or point me in the right direction?

推荐答案

星期一早上的忧郁症已经消除，现在我可以清楚地看到了，这是任何寻找的人的答案:

Monday morning blues have lifted, I can see clearly now, here is the answer for anyone looking :

$(document).ready(function () {

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

$(':input[data-autocomplete]').catcomplete({
source: $(':input[data-autocomplete]').attr("data-autocomplete")
}).data("catcomplete")._renderItem = function (ul, item) {
var MyHtml = "<a>" + "<div class='ac' >" +
                 "<div class='ac_img_wrap' >" +
                 '<img src="../../uploads/' + item.imageUrl + '.jpg"' + 'width="40" height="40" />' +
                 "</div>" +
                 "<div class='ac_mid' >" +
                 "<div class='ac_name' >" + item.value + "</div>" +
                 "<div class='ac_info' >" + item.info + "</div>" +
                 "</div>" +
                 "</div>" + "</a>";
return $("<li></li>").data("item.autocomplete", item).append(MyHtml).appendTo(ul);
};

});

这篇关于带有_renderItem和类别的jQuery自动完成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！