JQuery UI Autouzupełnianie Rendering Kategorie z łączami

Question

Używam autouzupełniania JQuery UI do szybkiego widgetu wyszukiwania. Mam kilka zgrupowanych obiektów, takich jak hotele, miasta, obszary itp. Mogłem renderować kategorie, ale nie mogłem ich połączyć. Kiedy próbuję, ui autouzupełnianie wtyczki wykrywa kategorie takie jak elementy. To nie jest problem, ale kiedy koncentruje się je za pomocą strzałki w górę/w dół lub za pomocą myszy, zwraca mi błąd tak:

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

Jak mogę rozwiązać ten problem? Staram się korzystać z „Focus” zdarzenie jQuery UI autouzupełniania jest z kilku metod (takich jak „return false, e.stopPropagation lub e.preventDefault”), ale to nie działa

Oto mój kod:

$.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); 
    }; 

Oto próbka JSON odpowiedź dla "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"}] 

Answer 1

Dźwięki (i wygląda) jak chceszselect/focus wydarzenie dla elementów kategorii (jeśli tak nie jest, zaktualizuję odpowiedź).

Widżet autouzupełniania wewnętrznie oczekuje, że elementy listy mają powiązane z nimi dane item.autocomplete. Aby obejść ten błąd, możesz utworzyć elementy "kategorii" z odpowiednimi danymi. Pozwoli to, aby reagować na zdarzenia select i pozbyć się błędów występujących na razie focus:

Zaktualizowany kod widżet:

$.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); 
     }); 
    } 
}); 

Przykład:http://jsfiddle.net/J5rVP/20/

Answer 2

dla jQuery -ui-1.10 + nazwa tagu danych została zmieniona na "ui-autouzupełnianie" jak poniżej:

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