JQuery UI Rendering automatico Categorie di rendering con collegamenti

Question

Sto utilizzando il completamento automatico dell'interfaccia utente JQuery per il widget di ricerca rapida. Ho diversi elementi raggruppati come alberghi, città, aree ecc. Potrei rendere le categorie, ma non potrei collegarle. Quando provo, il plugin di completamento automatico di ui rileva le categorie come gli oggetti. Questo non è un problema, ma quando mi sono concentrato utilizzando la freccia su/giù o usando il mouse, mi restituisce un errore come questo:

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

Come posso risolvere questo problema? Io cerco di usare evento "focus" di JQuery UI completamento automatico con diversi metodi (come 'return false, e.stopPropagation o e.preventDefault'), ma non ha funzionato

Ecco il mio codice:

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

Ecco il campione JSON risposta per "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

Suoni (e guarda) come si desidera il select/focus evento per gli articoli di categoria (se questo non è il caso aggiornerò la mia risposta).

Il widget di completamento automatico prevede internamente che gli elementi di elenco contengano i dati item.autocomplete associati. Per aggirare l'errore, potresti creare i tuoi articoli di "categoria" con i dati appropriati. Questo vi permetterà di reagire all'evento select e sbarazzarsi dell'errore che si verificano sul focus evento:

Aggiornato codice del widget:

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

Esempio:http://jsfiddle.net/J5rVP/20/

Answer 2

per jQuery -ui-1.10 + il nome del tag dati è cambiato in "ui-autocomplete-item" come di seguito:

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