गिनती तंत्र

Question

के साथ jQuery यूआई स्वत: पूर्ण श्रेणियां मैं दस्तावेज में श्रेणियों के उदाहरण के आधार पर jQuery UI Autocomplete को कार्यान्वित कर रहा हूं। मैं श्रेणियों के शीर्षलेख में परिणामों की संख्या जोड़ना चाहता हूं, इसलिए "उत्पाद" प्रदर्शित करने के बजाय यह "उत्पाद (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); 
       }); 
      } 
     });