无法在 jquery 自动完成 MVC4 中呈现 html答案

【问题标题】：Unable to render html in jquery autocomplete MVC4无法在 jquery 自动完成 MVC4 中呈现 html
【发布时间】：2014-02-28 14:24:42
【问题描述】：

我收到此错误“无法获取 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 上的搜索字段一样。请帮助我在哪里以及为什么会出现此错误。问候

【问题讨论】：

标签： jquery ajax jquery-ui asp.net-mvc-4

【解决方案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

【讨论】：