jQuery自动完成附加链接在底部 [英] Jquery Auto complete append link at the bottom
本文介绍了jQuery自动完成附加链接在底部的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在我的Web项目中使用jQuery自动完成插件.我想显示3个元素,然后在底部添加查看所有结果"链接.
I am using jQuery auto-complete plugin in my web project. I want to show 3 element and after that i want to append 'see all results' link to the bottom.
我尝试使用以下代码.
$( ".grid-search-box" ).autocomplete({
minLength: 0,
source: temp,
focus: function( event, ui ) {
$( ".grid-search-box" ).val( ui.item.value );
return false;
},
select: function( event, ui ) {
$( ".grid-search-box" ).val( ui.item.value );
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item )
{
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" )
.appendTo( ul );
};
有人可以建议我,如何解决它.
Can anybody suggest me, how to solve it.
推荐答案
演示在这里,
http://jsfiddle.net/muthkum/vqwBP/105/
希望您能弄清楚如何实现.
I hope you will figure out how to implement.
更新: 我设法更新了您的代码,
Update: I managed to update your code,
$( ".grid-search-box" ).autocomplete({
minLength: 0,
source: function(request, response) {
var results = $.ui.autocomplete.filter(temp, request.term);
response(results.slice(0, 3)); //show 3 items.
},
open: function(event, ui) {
$('.ui-autocomplete').append('<li><a href="javascript:alert(\'redirecting...\')">See All Result</a></li>'); //See all results
},
focus: function( event, ui ) {
$( ".grid-search-box" ).val( ui.item.value );
return false;
},
select: function( event, ui ) {
$( ".grid-search-box" ).val( ui.item.value );
return false;
}
}).data( "autocomplete" )._renderItem = function( ul, item ) {
return $( "<li></li>" )
.data( "item.autocomplete", item )
.append( "<a><span class='" + item.status + "'></span>" + item.value + "</a>" )
.appendTo( ul );
};
演示: http://jsfiddle.net/muthkum/vqwBP/106/
这篇关于jQuery自动完成附加链接在底部的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文