jQuery UIカウントメカニズムを持つオートコンプリートカテゴリ

Question

ドキュメントのカテゴリの例に基づいてjQuery UIオートコンプリートを実装しています。 Categoriesヘッダーに結果の数を追加したいので、 "Products"を表示する代わりに "Products（3）"と表示します。私は、_renderMenu関数を例から変更する必要があることを知っていますが、変更方法の理解には問題があります。私を正しい道に導く助けがあれば、大いに感謝します。

ここでjQueryのUIオートコンプリートカテゴリからのコード例であるがデモ：

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