如何对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>
6条答案
按热度按时间xoshrz7s1#
最终更新
由于已经覆盖了默认的
_renderItem
方法,因此可以覆盖默认的_renderMenu
。答案是从这个jQueryUI: how can I custom-format the Autocomplete plug-in results?修改的,所以感谢@cheeso..
原始答案
在你的
success
回调中使用$("SearchModel:lt(10)", xmlResponse).map(...
:lt(10)
获取索引小于10的元素。因此,将返回最多10个结果。(当然,数字10可以是你想要的任何东西)
查看http://api.jquery.com/lt-selector/上的
:lt()
选择器更新
虽然我不明白为什么第一个答案不起作用,因为
SearchModel
是一个标记,我们的目标是..我们可以移动map方法中的过滤。documentation of map()
hzbexzde2#
为什么不限制查询从xml源返回的数据呢?
您必须记住,自动完成功能本质上是使用正则表达式来匹配数据源中的项。拥有一个大的数据源是不好的,因为它必须解析这么多的数据,只是为了找到正确的项目。
ncecgwcz3#
这是我在阅读了一些自动补全API文档后所做的
遵循这个模式可以省去渲染层中的一些繁琐工作。
5n0oy7gb4#
限制结果的最快方法是在“开放”事件期间进行。我们可以删除jquery ui动态创建的部分内容,减少children元素数组。
这个解决方案解决了我同样的问题:
bwntbbo35#
您可以为“open”事件添加一个处理程序:
amrnrhlw6#
我有一个WordPress的线索。
检查像
assets/js/custom.js
这样的文件(如果有的话):并将
minLenght
更改为更多字母或添加maxResults
。