我有使用 jQuery UI 自动完成插件的搜索建议自动完成功能。 http://jqueryui.com/autocomplete/
但是如何添加结果弹出项的底部,其行为类似于 Quora(见下文)。
Javascript
$("#question_search").autocomplete({
source:$('#question_search').data('source'),
html: true,
appendTo: "#search_results",
select: function( event, ui ) {
window.location=ui.item.value;
return false;
},
focus: function( event, ui ) { },
open: function( event, ui ) { });
查看
<div id="question_search_form">
<input type="text" id="question_search" data-source="<%= new_search_url %>" />
<div id="search_results"></div>
</div>
示例
最佳答案
我建议覆盖_renderMenu
,然后简单地在列表项中附加一个 anchor 。
JavaScript:
$( "#question_search" ).autocomplete({
source:$('#question_search').data('source'),
html: true,
appendTo: "#search_results",
select: function( event, ui ) {
window.location=ui.item.value;
return false;
},
focus: function( event, ui ) { },
open: function( event, ui ) { }
}).data( "autocomplete" )._renderMenu = function( ul, items ) {
$.ui.autocomplete.prototype._renderMenu.apply( this, [ul, items] );
ul.append( '<li><a href="/search/'+ this.term + '">Search: '+ this.term + '</a></li>' );
};
演示: http://jsfiddle.net/4pk3V/42/
希望这有帮助!如果您有任何疑问,请告诉我!
关于ruby-on-rails - 如何在 jQuery.ui.autocomplete 中的自动完成弹出窗口下方添加所有搜索的链接?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14466662/