无法在jQuery自动完成MVC4中呈现HTML

Question

我收到此错误“无法获取renderItem的属性”。

jQuery代码

$("#term").autocomplete({
    //  minLength: 1, // require atleast 2 characters to use
    source: function (req, resp) { // get JSON object from SearchController
        $.ajax({
            url: "/Search/AutoComplete", // SearchController JsonResult
            type: "POST",
            dataType: "json",
            data: { term: req.term },
            success: function (data) {
                resp($.map(data, function (item) {

                    return { label: item.Name, value: item.Name, imageURL: item.ImageURL, id: item.ProductId };
                }

                ));
            }
        });
    },



    select: function (event, ui) { // keyword selected; parse values and forward off to ProductController's ViewProduct View
        var selected = ui.item;
        var mdlNum, mdlName;

        if (selected.value !== null) {
            var array = selected.value.split(' ');
            mdlNum = array[0].toLowerCase();
               mdlName = selected.value.replace(array[0], '').trim().toLowerCase().replace(/[^a-z0-9]+/g, ' ');
             window.location.replace('http://' + location.host + '/Search/Refine?ref=' + mdlNum + '' + mdlName);
            window.location.replace('http://' + location.host + '/Category/Details/' + selected.id);

        }

    },

    open: function () { $('ul.ui-autocomplete').addClass('opened') },
    close: function () { $('ul.ui-autocomplete').removeClass('opened').css('display', 'block'); }


}).data("ui-autocomplete")._renderItem = function (ul, item) {

    //var inner_html = '<a><div id="example" class="k-content"><div class="demo-section"><div class=".customers-list img"><img src="' + "../common/theme/images/gallery/3.jpg" + '"></div><div class="customers-list h3">' + item.label + '</div><div class="customers-list p">' + item.description + '</div></div></div></a>';


    var newText = String(item.value).replace(
           new RegExp(this.term, "gi"),
           "<strong>$&</strong>"
         //  "<span class='ui-state-highlight'>$&</span>"
           );

    var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + item.imageURL + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.id + '</div></div></a>';


    return $("<li></li>")
        .data("item.autocomplete", item).append(inner_html)
        .appendTo(ul);

};

我想在键入内容时在下拉列表中显示另一件事，如果没有找到结果。 就像soundcloud.com上的搜索字段一样。 请帮助我在哪里以及为什么出现此错误。 问候

Answer 1

jQuery UI自动完成功能需要一个数据源，其中每个项目的label和value属性均如此。 即使您的项目具有额外的属性： imageURL和id ，它们也会被忽略，并且在您的select回调或_renderItem函数中将不可用。

因此，您需要将其他属性存储在其他位置。 我建议将自动完成项的value设置为服务提供的ID ，然后为图像URL维护单独的缓存。

像这样：

imageUrls = {};

...

resp($.map(data, function (item) {
    imageUrls[item.ID] = item.ImageURL;
    return { label: item.Name, value: item.ID };
}

...

var inner_html = '<a><div class="list_item_container"><div class="image"><img src="' + imageUrls[item.value] + '" alt="" /></div><div class="labels">' + newText + '</div><div class="description">' + item.value + '</div></div></a>';

也可以看看：

http://api.jqueryui.com/autocomplete/#option-source

http://api.jqueryui.com/autocomplete/#method-_renderItem