2

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 検索オートコンプリート

4

2 に答える 2

5

をオーバーライドして_renderMenuから、リスト項目内にアンカーを追加することをお勧めします。

ジャバスクリプト:

$( "#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/

お役に立てれば！ご不明な点がございましたら、お気軽にお問い合わせください。

于 2013-01-22T20:07:10.493 に答える
-2

検索結果の後に div を作成するだけです...?

于 2013-01-22T19:46:13.700 に答える