我得到这个错误无法得到renderItem财产。

I'm getting this error "unable to get property of renderItem".

jQuery的code

Jquery Code

$("#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搜索字段。请帮我在哪里，为什么我得到这个错误。 问候

Another thing I want to display in the dropdown as I type and if there is no result found. Just like the search field on soundcloud.com. please help me where and why I'm getting this error. Regards

推荐答案

jQuery UI的自动完成需要与刚标签和值数据源为每个项目的属性。即使您的项目有额外的属性： IMAGEURL 和 ID ，这些将被忽略，将无法在你的选择回调或 _renderItem 的功能。

jQuery UI Autocomplete needs a datasource with just label and value properties for each item. Even though your items have extra properties: imageURL and id, those will be ignored and won't be available in your select callback or _renderItem function.

所以，你需要存储的其他属性其他地方。我建议设置值您自动完成项目的 ID 您的服务提供，然后保持为一个单独的缓存中图像的URL。

So you need to store those other properties somewhere else. I recommend setting the value of your autocomplete items to the ID your service provides, and then maintaining a separate cache for the image URLs.

事情是这样的：

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