ruby-on-rails - 如何在 jQuery.ui.autocomplete 中的自动完成弹出窗口下方添加所有搜索的链接?

标签 ruby-on-rails ruby jquery-ui autocomplete

我有使用 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>

示例

Quora search autocomplete

最佳答案

我建议覆盖_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/

相关文章:

JQuery Portlet - 是否可以有不同的 Portlet 大小?

javascript - Rails 渲染仅加载部分内容

ruby-on-rails - Rails 中的定时页面缓存

ruby-on-rails - Rails 中的唯一搜索结果

ruby-on-rails - 除了在一个字段上,我如何禁止更新?

ruby-on-rails - Ruby 用变量解析 DateTime

ajax - jQuery UI 选项卡 : How to switch to a (ajax) tab without reloading it?

ruby-on-rails - 命名空间模型 + postgresql 问题

ruby-on-rails - Ruby on Rails - 回形针和动态参数

jquery - jquery UI datepicker 中 getDate 方法之后的 parsedate