JQuery UI自动填充带链接的渲染类别

Question

我正在使用JQuery UI Autocomplete来快速搜索小部件.我有几个分组的项目,如酒店,城市,区域等.我可以渲染类别,但我无法链接它们.当我尝试时,ui自动完成插件会检测类似项目的类别.这不是问题,但是当我使用向上/向下箭头或使用鼠标聚焦它们时,它会返回如下错误:

"TypeError: item is undefined. this.liveRegion.text( item.value );"

我怎样才能解决这个问题？我尝试使用JQuery UI Autocomplete的"焦点"事件与几种方法(如' return false,e.stopPropagation或e.preventDefault'),但它不起作用

这是我的代码:

$.widget("custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function (ul, items) {
            var searchkey = "";
            var itemtype = "";
            var searchtype = "";

            var self = this, currentCategory = "";
            $.each(items, function (index, item) {
                if (typeof item.kelime != 'undefined') { searchkey = item.kelime; }
                if (item.category != currentCategory) {
                    if (item.category == "Bölge" || item.category == "?ehir") {
                        itemtype = "cat-bolgeler";
                    } else if (item.category == "Otel") {
                        itemtype = "cat-oteller";
                        searchtype = "otel";
                    } else if (item.category == "Yurt D??? Tur") {
                        itemtype = "cat-ydtur";
                        searchtype = "yurtdisitur";
                    } else if (item.category == "Yurt ?çi Tur") {
                        itemtype = "cat-yitur";
                        searchtype = "yurticitur";
                    } else if (item.category == "Cruise") {
                        itemtype = "cat-cruise";
                        searchtype = "cruise";
                    }
                    if (searchtype != "") {
                        ul.append("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'><a href='/arama/" + searchkey + "?k=" + searchtype + "&q=" + searchkey + "'>" + item.category + "</a></li>");
                    } else {
                        ul.append("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'>" + item.category + "</li>");
                    }
                    currentCategory = item.category;
                }
                self._renderItem(ul, item);
            });
        }
    });

    $(".hizliaratext").catcomplete({
        source: function (request, response) {
            $.ajax({
                url: '/filename.aspx',
                dataType: "json",
                contentType: "application/json; charset=utf-8",
                type: "get",
                data: { kelime: request.term },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            label: item.label,
                            searchid: item.searchid,
                            category: item.category,
                            link: item.link,
                            kelime: item.kelime
                        }
                    }));
                }
            });
        },
        minLength: 3,
        appendTo: "#hizliara",
        select: function (event, ui) {
            window.location = ui.item.link;
        },
        focus: function (event, ui) {
        }
    }).data("catcomplete")._renderItem = function (ul, item) {
        return $("<li>").data("item.autocomplete", item).append("<a>" + item.label + "</a>").appendTo(ul);
    };

以下是" ？kelime = anka " 的示例JSON响应:

[{"searchid":2001,"label":"Alba Ankara Hotel","category":"Otel","link":"/otel-detay/alba-ankara-hotel","kelime":"anka"},{"searchid":2238,"label":"Ankara Madi ?nci Hotel","category":"Otel","link":"/otel-detay/ankara-madi-inci-hotel"},{"searchid":2244,"label":"Madi Hotel Ankara","category":"Otel","link":"/otel-detay/madi-hotel-ankara"},{"searchid":2403,"label":"City Hotel Ankara","category":"Otel","link":"/otel-detay/city-hotel-ankara"},{"searchid":2404,"label":"Do?a Residence Ankara","category":"Otel","link":"/otel-detay/doga-residence-ankara"},{"searchid":6779,"label":"Ankara","category":"?ehir","link":"/ustaramaliste.aspx?y=6779"},{"searchid":6785,"label":"Ankara / Çankaya","category":"Bölge","link":"/ustaramaliste.aspx?y=6785"},{"searchid":14601,"label":"?zmir / Çankaya","category":"Bölge","link":"/ustaramaliste.aspx?y=14601"}]

Answer 1

听起来（和看起来）就像你想要/selectfocus（如果不是这种情况，我将更新我的答案）。

\n\n

自动完成小部件内部期望列表项具有item.autocomplete与其关联的数据。为了解决该错误，您可以使用适当的数据创建“类别”项。这将使您能够对select事件做出反应并消除发生在focus事件上发生的错误：

\n\n

更新的小部件代码：

\n\n

$.widget("custom.catcomplete", $.ui.autocomplete, {\n    _renderMenu: function(ul, items) {\n        var searchkey = "";\n        var itemtype = "";\n        var searchtype = "";\n\n        var self = this,\n            currentCategory = "";\n        $.each(items, function(index, item) {\n            if (typeof item.kelime != \'undefined\') {\n                searchkey = item.kelime;\n            }\n            if (item.category != currentCategory) {\n                if (item.category == "B\xc3\xb6lge" || item.category == "\xc5\x9eehir") {\n                    itemtype = "cat-bolgeler";\n                } else if (item.category == "Otel") {\n                    itemtype = "cat-oteller";\n                    searchtype = "otel";\n                } else if (item.category == "Yurt D\xc4\xb1\xc5\x9f\xc4\xb1 Tur") {\n                    itemtype = "cat-ydtur";\n                    searchtype = "yurtdisitur";\n                } else if (item.category == "Yurt \xc4\xb0\xc3\xa7i Tur") {\n                    itemtype = "cat-yitur";\n                    searchtype = "yurticitur";\n                } else if (item.category == "Cruise") {\n                    itemtype = "cat-cruise";\n                    searchtype = "cruise";\n                }\n                if (searchtype != "") {\n                    ul.append($("<li class=\'ui-autocomplete-category " + itemtype + "\' id=\'" + item.searchid + "\'><a href=\'/arama/" + searchkey + "?k=" + searchtype + "&q=" + searchkey + "\'>" + item.category + "</a></li>").data("item.autocomplete", {}));\n                } else {\n                    ul.append($("<li class=\'ui-autocomplete-category " + itemtype + "\' id=\'" + item.searchid + "\'>" + item.category + "</li>").data("item.autocomplete", {}));\n                }\n                currentCategory = item.category;\n            }\n            self._renderItem(ul, item);\n        });\n    }\n});\n

\n\n

示例： http: //jsfiddle.net/J5rVP/20/

\n