限制jQuery自動完成的結果

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的

例子：

<?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個結果LTS將會返回..

（當然10號可能是您想要的任何）

看:lt()選擇在http://api.jquery.com/lt-selector/

更新

雖然我不明白爲什麼第一個答案不起作用，因爲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源返回的數據？

編輯：

你要記住的是，自動填充功能基本上是使用正則表達式來匹配數據源中的項目。擁有大型數據源是不好的，因爲它必須解析這麼多數據才能找到正確的項目。

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

這是我基於自動完成API文檔的一些閱讀什麼

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