jQuery Autocomplete

Question

में परिणाम सीमित करें आप jQuery स्वत: पूर्ण से परिणाम पर सीमा कैसे निर्धारित कर सकते हैं?

यह मेरा कोड है:

 $.ajax({ 
      url: "/cache/search/SearchModels.xml", 
      dataType: "xml", 
      success: function(xmlResponse) { 
       var data = $("SearchModel", xmlResponse).map(function() { 
        return { 
         value: $("Name", this).text() + ", " + $("Description", this).text(), 
         id: $("No", this).text(), 
         name: $("Name", this).text(), 
         url: $("URL", this).text() 
        }; 
       }).get(); 
       $("#txtTopSearch").autocomplete({ 
        source: data, 
        minLength: 2, 
        select: function(event, ui) { 
         BlockUI(); 
         if (typeof (ui.item.url) != 'undefined') { 
          window.location = ui.item.url; 
         } 
         else { 
          alert('Page not found!'); 
          $.unblockUI(); 
         } 
        }, 
        search: function(event, ui) { 
         $('#txtTopSearch').addClass('searchInProgress'); 
        }, 
        close: function(event, ui) { 
         $('#txtTopSearch').removeClass('searchInProgress'); 
        } 
       }).data("autocomplete")._renderItem = function(ul, item) { 
        return $("<li></li>") 
        .data("item.autocomplete", item) 
        .append("<a><span style='font-size:.9em; font-weight:bold;'>" + item.id + "</span><br /><span style='font-size:.8em;'>" + item.name + "</span></a>") 
        .appendTo(ul); 
       }; 
      }, 
      error: function(xhr, textStatus, errorThrown) { 
       alert('Error: ' + xhr.statusText); 
      } 
     }); 

इस कोड को वापसी क्वेरी में सभी परिणाम है, लेकिन मैं यह सिर्फ दिखाने के लिए 10 परिणामों को सीमित करना चाहते हैं। पुराने स्वत: पूर्ण संस्करण में इसके लिए एक विकल्प था, लेकिन अब इसे बहिष्कृत किया गया है। एक्सएमएल के

उदाहरण:

<?xml version="1.0"?> 
<ArrayOfSearchModel xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema"> 
    <SearchModel> 
    <No>1</No> 
    <Name>My product</Name> 
    <Description>My description</Description> 
    <Tags>blue;brown;</Tags> 
    <URL>/Products/1</URL> 
    </SearchModel> 
</ArrayOfSearchModel> 

Answer 1

अंतिम अद्यतन
समझने कि मेरे पिछले जवाब में मैं सेट पूरे xml परिणाम सीमित किया गया था और नहीं स्वत: पूर्ण के परिणामों के बाद

आप डिफ़ॉल्ट _renderItem विधि अधिरोहित किया है, आप ओवरराइड कर सकते हैं डिफ़ॉल्ट _renderMenu।

$.ui.autocomplete.prototype._renderMenu = function(ul, items) { 
    var self = this; 
    $.each(items, function(index, item) { 
     if (index < 10) // here we define how many results to show 
     {self._renderItem(ul, item);} 
     }); 
} 

जवाब से इस jQueryUI: how can I custom-format the Autocomplete plug-in results? तो धन्यवाद @cheeso के लिए जाने के संशोधित किया गया है ..

---

मूल उत्तर

आप में success कॉलबैक का उपयोग $("SearchModel:lt(10)", xmlResponse).map(...

:lt(10) तत्वों हो जाता है 10 से कम की एक सूचकांक के साथ तो अधिकतम 10 resu लीटर लौटा दी जाएगी ..

हालांकि मैं क्यों नहीं समझ सकता http://api.jquery.com/lt-selector/

अद्यतन

पर

:lt() चयनकर्ता पर देखो (पाठ्यक्रम की संख्या 10 कुछ भी आप चाहते हो सकता है) पहला जवाब काम नहीं करता है, क्योंकि SearchModel एक टैग है और हम इसे लक्षित करते हैं .. हम मानचित्र विधि में फ़िल्टरिंग को स्थानांतरित कर सकते हैं ..

success: function(xmlResponse) { 
       var data = $("SearchModel", xmlResponse).map(function(index) { 
        if (index<10) 
         { 
         return { 
          value: $("Name", this).text() + ", " + $("Description", this).text(), 
          id: $("No", this).text(), 
          name: $("Name", this).text(), 
          url: $("URL", this).text() 
           }; 
         } 
         else 
         { return null; } 
       }).get(); 

documentation of map()

Answer 2

क्यों डेटा आपकी क्वेरी अपने xml स्रोत से रिटर्न की सीमा नहीं?

संपादित करें:

आपको लगता है कि स्वत: पूर्ण कार्यक्षमता अनिवार्य रूप से डेटा स्रोत में आइटम मिलान करने के लिए एक regex उपयोग कर रहा है याद करने के लिए किया है। एक बड़ा डेटास्रोत खराब है क्योंकि इसे सही आइटम खोजने के लिए बस इतना डेटा पार्स करना है।

Answer 3

आप "खुला" घटना के लिए कोई हैंडलर जोड़ सकते हैं:

open:function(event,ui){ 
    var maxListLength=10; 
    var ul = jQuery("#txtTopSearch").autocomplete("widget")[0]; 
    while(ul.childNodes.length > maxListLength) 
      ul.removeChild(ul.childNodes[ul.childNodes.length-1]); 
    } 

Answer 4

यह है कि मैं क्या स्वत: पूर्ण एपीआई किए गए दस्तावेज़ों की कुछ पढ़ने के आधार पर किया है

$input.autocomplete({ 
    source: function(request, response) { 
    $.getJSON('search.php', request, function(data, status, xhr) { 
     // return a max of 10 results. 
     response(data.slice(0, 9)); 
    }); 
    } 
}) 

इस पैटर्न के बाद रेंडर परत में कोई फंकी सामान करने के लिए बचाता है।

Answer 5

परिणामों को सीमित करने का सबसे तेज़ तरीका इसे "खुले" ईवेंट के दौरान कर रहा है। हम बच्चों के तत्व सरणी को कम करने, jquery ui द्वारा गतिशील रूप से बनाई गई सामग्री का हिस्सा हटा सकते हैं।

var maxResults = 10; 
$input.autocomplete({ 
    source: somefile.json, 
    open: function(event,ui){ 
      $(this).data("uiAutocomplete").menu.element.children().slice(maxResults).remove(); 
     } 
})