How to add link to all search below autocomplete popup in jQuery.ui.autocomplete?

怎甘沉沦 提交于 2020-05-29 11:39:28

问题


I have search suggestion autocompletion using jQuery UI autocomplete plugin. http://jqueryui.com/autocomplete/

But how to add on the bottom of results popup item which behaves like on Quora(see below).

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 ) { });

View

<div id="question_search_form">
  <input type="text" id="question_search" data-source="<%= new_search_url %>" />
  <div id="search_results"></div>
</div>

Example

Quora search autocomplete


回答1:


I recommend overriding the _renderMenu then simply appending an anchor within a list-item.

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>' );  
};

DEMO: http://jsfiddle.net/4pk3V/42/

Hope this helps! Let me know if you have any questions!




回答2:


just make a div after the search results...?



来源:https://stackoverflow.com/questions/14466662/how-to-add-link-to-all-search-below-autocomplete-popup-in-jquery-ui-autocomplete

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!