Sonucu jQuery Otomatik Tamamlamada sınırla

Question

JQuery otomatik tamamlamada sonuçta bir sınır nasıl belirlenir?

Bu benim kodudur:

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

Bu kod dönüş sorguda tüm sonuçlar, ama bu sadece 10 sonuçlarını gösteren etmek sınırlamak istiyorum. Eski otomatik tamamlama sürümünde bunun için bir seçenek vardı, ancak şimdi kullanımdan kaldırıldı. XML

Örnek:

<?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

son bilgilendirme
i otomatik tamamlama sonuçları set tüm xml sonucu sınırlayan ve değildi önceki cevaplarında olduğu anlaşıldıktan sonra varsayılan _renderItem yöntemini geçersiz gibi

, sen geçersiz kılabilirsiniz varsayılan _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);} 
     }); 
} 

cevap

---

Orijinal Cevap Sende

success geri arama $("SearchModel:lt(10)", xmlResponse).map(...

:lt(10) unsurları alır kullanmak .. jQueryUI: how can I custom-format the Autocomplete plug-in results? yüzden teşekkür @cheeso gidin bundan değiştirilir 10'dan az bir indeks ile. Yani maksimum 10 resu lt geri dönecektir .. nedenini anlayamıyorum rağmen

http://api.jquery.com/lt-selector/

güncelleme

de

Bak :lt() seçiciye (10 numara şey sen istediğiniz olabilir tabii ki) ilk cevap işe yaramıyor, çünkü SearchModel bir etiket ve biz onu hedefliyoruz .. filtrelemeyi harita yönteminde taşıyabiliriz ..

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

Neden sorgu xml kaynağından döndüren verileri sınırlamaz?

Düzenleme:

Sen otomatik tamamlama işlevi esas veri kaynağı öğeleri eşleştirmek için bir normal ifade kullandığını hatırlamak zorunda. Büyük bir veri kaynağına sahip olmak kötüdür, çünkü doğru öğeyi bulmak için çok fazla veriyi ayrıştırmak zorundadır.

Answer 3

Sen "açık" bir olay için bir işleyici ekleyebilirsiniz:

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

Bu benim otomatik tamamlama API docs bazı okuma dayalı vermedi budur

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

Bu kalıbı takip etmek, render katmanında herhangi bir garip şeyler yapmak zorunda kalmadan tasarruf sağlar.

Answer 5

Sonuçları sınırlamanın en hızlı yolu, "açık" etkinlik sırasında bunu yapıyor. Çocuk öğesi dizisini azaltarak, dinamik olarak jquery ui tarafından oluşturulan içeriğin bir kısmını silebiliriz.

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