I use jQuery UI autocomplete for quick searches. I have several groups, such as hotels, cities, regions, etc. I could display categories, but I could not link them. When I try, the ui autocomplete plugin detects categories similar to elements. This is not a problem, but when I focused them using the up / down arrow or using the mouse, it returns me this error:
"TypeError: item is undefined. this.liveRegion.text( item.value );"
How can i fix this? I am trying to use the jQuery UI Autocomplete event "focus" with several methods (for example, " return false , e.stopPropagation or e.preventDefault "), but this did not work
Here is my code:
$.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); };
Here is a sample JSON response for " ? Kelime = anka ":
[{"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"}]