问题描述
你怎么能对从jQuery自动完成的结果设置限制?
这是我的code:
$阿贾克斯({
网址:/cache/search/SearchModels.xml
数据类型:XML,
成功:函数(xmlResponse){
VAR数据= $(SearchModel,xmlResponse).MAP(函数(){
返回{
价值:$(名,这一点)的.text()+,+ $(说明,这一点)的.text()
编号:$(否,这一点)的.text(),
名称:$(名,这一点)的.text()
网址:$(URL,这一点)的.text()
};
})。得到();
$(#txtTopSearch)。自动完成({
来源:资料,
的minLength:2,
选择:函数(事件,UI){
BlockUI();
如果(typeof运算(ui.item.url)!='不确定'){
window.location的= ui.item.url;
}
其他{
警报(找不到网页!');
$ .unblockUI();
}
},
搜索:函数(事件,UI){
$('#txtTopSearch')addClass('searchInProgress');
},
关闭:函数(事件,UI){
$('#txtTopSearch')removeClass移除('searchInProgress')。
}
})。数据(自动完成)._ renderItem =功能(UL,项目){
返回$(<立GT;< /李>中)
。数据(item.autocomplete项)
.append(< A><跨度风格='字体大小:.9em;字体重量:大胆;>中+ item.id +< / SPAN>< BR /><跨度风格='字体大小:.8em;>中+ item.name +< / SPAN>< / A>中)
.appendTo(微升);
};
},
错误:功能(XHR,textStatus,errorThrown){
警报('错误:'+ xhr.statusText);
}
});
这code返回所有结果查询,但我想这个限制只是显示10个结果。在旧版本的自动完成有这个选项,但现在已是德precated。
在XML实例:
<?XML版本=1.0&GT?;
< ArrayOfSearchModel的xmlns:XSI =http://www.w3.org/2001/XMLSchema-instance的xmlns:XSD =http://www.w3.org/2001/XMLSchema>
< SearchModel>
&所述;否→1&下; /否GT;
<名称>我的产品< /名称>
<说明>我描述< /说明>
<&标签GT;蓝色;棕色;< /标签>
< URL> /产品/ 1 LT; / URL>
< / SearchModel>
< / ArrayOfSearchModel>
最后更新结果
的理解,在我的previous答案我是限制整个XML结果集,而不是自动完成的结果后的
正如你所覆盖默认 _renderItem
方法,可以覆盖默认 _renderMenu
。
$。ui.autocomplete.prototype._renderMenu =功能(UL,物品){
VAR自我=这一点;
$。每次(项功能(索引项){
如果(指数小于10)//这里我们定义多少结果显示
{self._renderItem(UL,项目);}
});
}
的回答是从这个jQueryUI:我怎么能自定义格式的自动完成功能插件的结果吗?所以要感谢@cheeso ..
原来的答案
在您成功
回调使用 $(SearchModel:LT(10),xmlResponse).MAP(...
的:LT(10)
元素得到与将被退回小于10所以最大10个结果指数...
(的数量当然10可以是任何你想要的)
看:LT()
选择在
更新
虽然我不明白为什么第一个答案是不行的,因为 SearchModel
是一个标记,我们的目标是。我们可以在地图的方法移动过滤。
成功:函数(xmlResponse){
VAR数据= $(SearchModel,xmlResponse).MAP(函数(指数){
如果(指数小于10)
{
返回{
价值:$(名,这一点)的.text()+,+ $(说明,这一点)的.text()
编号:$(否,这一点)的.text(),
名称:$(名,这一点)的.text()
网址:$(URL,这一点)的.text()
};
}
其他
{返回null; }
})。得到();
How can you set a limit on the result from the jQuery autocomplete?
This is my code:
$.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);
}
});
This code return all results in the query, but I want to limit this to just showing 10 results. In the old autocomplete version there was an option for this, but it is now deprecated.
Example of the 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>
Final Update
after understanding that in my previous answers i was limiting the whole xml result set and not the results of the autocomplete
As you have overridden the default _renderItem
method, you can override the default _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 );}
});
}
answer is modified from this jQueryUI: how can I custom-format the Autocomplete plug-in results? so thanks go to @cheeso..
Original Answer
In you success
callback use $("SearchModel:lt(10)", xmlResponse).map(...
The :lt(10)
gets elements with an index of less than 10. So max 10 results will be returned..
(of course the number 10 could be anything you want)
Look at :lt()
selector at http://api.jquery.com/lt-selector/
update
Although i cannot understand why the first answer does not work, since the SearchModel
is a tag and we target that.. we can move the filtering in the map method..
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();
这篇关于限制的结果jQuery的自动完成的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!