限制jQuery自动完成中的结果

如何设置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 $("
") .data("item.autocomplete", item) .append("" + item.id + "
" + item.name + "") .appendTo(ul); }; }, error: function(xhr, textStatus, errorThrown) { alert('Error: ' + xhr.statusText); } }); 

此代码返回查询中的所有结果，但我想将此限制为仅显示10个结果。 在旧的自动完成版本中，有一个选项，但现在已弃用。

XML示例：

    1 My product My description blue;brown; /Products/1   

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修改了答案：我如何自定义格式化Autocomplete插件结果？ 所以，谢谢你去@cheeso ..

---

原始答案

在你的success回调中使用$("SearchModel:lt(10)", xmlResponse).map(...

:lt(10)获取索引小于10的元素。因此将返回最多10个结果。

（ 当然10号可能是你想要的任何东西 ）

查看:lt() http :lt() //api.jquery.com/lt-selector/上的:lt()选择器

更新

虽然我无法理解为什么第一个答案不起作用，因为SearchModel是一个标签，我们将其作为目标......我们可以在map方法中移动过滤。

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

地图文件（）

Answer 2

为什么不限制查询从xml源返回的数据？

编辑：

您必须记住，自动完成function实际上是使用正则表达式来匹配数据源中的项目。 拥有大型数据源是不好的，因为它必须解析如此多的数据才能找到正确的项目。

Answer 3

这是我在阅读自动完成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 4

限制结果的最快方法是在“开放”事件期间执行此操作。 我们可以删除jquery ui动态创建的部分内容，减少子元素数组。

这个解决方案为我解决了同样的问题：

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

Answer 5

您可以为“打开”事件添加处理程序：

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