JQuery UI自動完成呈現帶有鏈接的類別

Question

我正在使用JQuery UI自動完成來快速搜索小部件。我有幾個分組項目，如酒店，城市，地區等我可以呈現類別，但我無法鏈接它們。當我嘗試時，ui自動完成插件檢測類似項目。這不是問題，但是當我關注他們使用上/下箭頭或使用鼠標，它返回我這樣的錯誤：

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

我該如何解決這個問題？我嘗試使用jQuery UI自動完成的「焦點」事件有幾種方法（如「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); 
    }; 

這裏的樣品JSON響應爲 「kelime =安卡？」：

[{"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

聲音（看上去）像你要的select/focus事件類別項目（如果不是這種情況，我會更新我的答案）。

自動填充小部件在內部期望列表項具有與其關聯的item.autocomplete數據。爲了解決錯誤，您可以使用適當的數據創建「類別」項目。這將使你的select事件作出反應，擺脫發生在focus事件中的錯誤的：

更新的微代碼：

$.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>").data("item.autocomplete", {})); 
       } else { 
        ul.append($("<li class='ui-autocomplete-category " + itemtype + "' id='" + item.searchid + "'>" + item.category + "</li>").data("item.autocomplete", {})); 
       } 
       currentCategory = item.category; 
      } 
      self._renderItem(ul, item); 
     }); 
    } 
}); 

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

Answer 2

的jQuery -ui-1.10 +數據標籤名稱已更改爲「ui-autocomplete-item」，如下所示：

ul.append($("<li class='ui-autocomplete-category'>" + item.Type + "</li>").data("ui-autocomplete-item", {}));