帶計數機制的jQuery UI自動完成類別

Question

我正在根據文檔中的類別示例實現jQuery UI自動完成。我想將結果數量添加到類別標題中，因此不顯示「產品」，而是顯示「產品（3）」。我知道_renderMenu函數需要從示例中修改，但我無法理解如何修改它。任何幫助讓我走上正確的道路將不勝感激。

下面是從jQuery用戶界面自動完成分類的示例代碼演示：

<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

一個很好的策略是創建一個對象/散列存儲類別作爲鍵和匹配該類別值的項目的陣列。換句話說，你想建立這樣的事情：

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

一旦你建立這個你可以通過它輸出每個類別後跟其值迭代。這樣做的好處是你所要做的就是獲取項目的數量是取對應於當前類別的數組的長度。喜歡的東西：

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

例子：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); 
       }); 
      } 
     });