jQuery UI Sayım mekanizmasına sahip otomatik tamamlama kategorileri

Question

jQuery UI Otomatik Tamamlama'yı belgelerindeki örneklere göre uygulıyorum. Sonuçların sayısını kategori başlığına eklemek istiyorum, bu yüzden "Ürünler" i görüntülemek yerine "Ürünler (3)" görüntüleniyor. _renderMenu işlevinin örnekten değiştirilmesi gerektiğini biliyorum, ancak nasıl değiştirilebileceğini anlamakta zorlanıyorum. Beni doğru yolda başlatan herhangi bir yardım büyük ölçüde takdir edilecektir.

İşte jQuery UI otomatik tamamlama kategorileri örnek kodudur demo:

<script> 
    $.widget("custom.catcomplete", $.ui.autocomplete, { 
     _renderMenu: function(ul, items) { 
      var self = this, 
       currentCategory = ""; 
      $.each(items, function(index, item) { 
       if (item.category != currentCategory) { 
        ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
        currentCategory = item.category; 
       } 
       self._renderItem(ul, item); 
      }); 
     } 
    }); 
    </script> 
    <script> 
    $(function() { 
     var data = [ 
      { label: "anders", category: "" }, 
      { label: "andreas", category: "" }, 
      { label: "antal", category: "" }, 
      { label: "annhhx10", category: "Products" }, 
      { label: "annk K12", category: "Products" }, 
      { label: "annttop C13", category: "Products" }, 
      { label: "anders andersson", category: "People" }, 
      { label: "andreas andersson", category: "People" }, 
      { label: "andreas johnson", category: "People" } 
     ]; 

     $("#search").catcomplete({ 
      delay: 0, 
      source: data 
     }); 
    }); 
    </script> 



<div class="demo"> 
    <label for="search">Search: </label> 
    <input id="search" /> 
</div> 

Answer 1

İyi bir strateji anahtarlar ve değerler olarak bu kategoriyi eşleşen öğeleri diziler gibi kategoriler saklayan bir nesne/karma oluşturmak olacaktır. Başka bir deyişle, böyle bir şey inşa etmek istiyorum:

{ "Products": ["annhhx10", "annk K12", /*etc*/], 
    "People": ["anders andersson", "andreas andersson", /*etc*/] 
} 

Eğer bunu ve çıkış aracılığıyla değerlerine ardından her kategoriyi yineleme bu inşa kere. Bunun avantajı, öğelerin sayısını almak için geçerli kategoriye karşılık gelen dizinin uzunluğunu almaktır.

$.widget("custom.catcomplete", $.ui.autocomplete, { 
    _renderMenu: function(ul, items) { 
     var self = this, 
      categories = { }; 

     /* Build a dictionary/hash where keys are categories and values are 
     * arrays of items with that category 
     */ 
     $.each(items, function (index, item) { 
      if (!categories.hasOwnProperty(item.category)) { 
       categories[item.category] = [item]; 
      } else { 
       categories[item.category].push(item); 
      } 
     }); 

     /* Iterate over the hash we just built and display a category followed by its 
     * items. 
     */ 
     $.each(categories, function(category, items) { 
      if (category) { 
       ul.append("<li class='ui-autocomplete-category'>" + category + " (" + items.length + ")</li>"); 
      } 
      $.each(items, function (index, item) { 
       self._renderItem(ul, item); 
      }); 
     }); 
    } 
}); 

Örnek: Böyle bir şeyhttp://jsfiddle.net/andrewwhitaker/vNtGd/

Answer 2

$.widget("custom.catcomplete", $.ui.autocomplete, { 
      _renderMenu: function (ul, items) { 
       var self = this, 
       currentCategory = "", itemCount = 0, itemsLength = items.length - 1; 
       $.each(items, function (index, item) { 
        if (item.category != currentCategory) { 
         ul.find('.ui-autocomplete-category:last').text(function() { return $(this).text() + ' ' + itemCount }); 
         ul.append("<li class='ui-autocomplete-category'>" + item.category + "</li>"); 
         currentCategory = item.category; 
         itemCount = 1; 
        } 
        else { 
         itemCount++; 
        } 

        if (index === itemsLength) { 
         ul.find('.ui-autocomplete-category:last').text(function() { return $(this).text() + ' ' + itemCount }); 
        } 

        self._renderItem(ul, item); 
       }); 
      } 
     });