jQuery UI Completamento automatico categorie con meccanismo di conteggio

Question

Sto implementando il completamento automatico dell'interfaccia utente jQuery in base all'esempio di categorie nella documentazione. Vorrei aggiungere il numero di risultati all'intestazione Categorie, quindi anziché visualizzare "Prodotti" visualizza "Prodotti (3)". So che la funzione _renderMenu deve essere modificata dall'esempio, ma ho difficoltà a capire come può essere modificata. Qualsiasi aiuto che mi avvii sulla strada giusta sarebbe molto apprezzato.

Ecco il codice di esempio da jQuery UI completamento automatico Categorie 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

Una buona strategia potrebbe essere quella di creare un oggetto/hash che memorizza le categorie come le chiavi e gli array di elementi corrispondenti a tale categoria come valori. In altre parole, si vuole costruire qualcosa di simile:

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

Una volta creato questo si può scorrere attraverso di essa e di uscita di ogni categoria, seguito dai suoi valori. Il vantaggio di questo è tutto ciò che devi fare per ottenere il numero di elementi è prendere la lunghezza della matrice corrispondente alla categoria corrente. Qualcosa di simile:

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

Esempio:http://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); 
       }); 
      } 
     });