2

Ruby/Sinatra アプリケーションを Heroku にデプロイしており、IndexTank プラグインを使用して全文検索機能を提供しています。

現在、IndexTank Autocomplete Documentationに従って、すぐに使用できるオートコンプリート機能を使用しています。

現在、デフォルトの :text フィールドに文書の都市名と国名が含まれるように文書を索引付けしています。すなわち:

@index.document("1").add({:text => "London England"})

デフォルトのオートコンプリート フィールドで検索を行うと、実際には機能して結果が返されますが、期待したり、気に入ったりするものではありません。

フィールドに「lon 」と入力すると、「 london」が返されます。これは確かに正しいドキュメントですが、実際には ' London England 'が返されることを期待していました。

「 lon 」を検索したときに「 London England 」が表示されるように、オートコンプリート フィールドのドロップダウンに表示されるデータを変更する方法を知っている人はいますか?

アップデート

コメントで提案されているように、 InstantLinks機能も試しましたが、これも必要なことを十分に行っていません。どちらのソリューションも私が必要とすることの約 80% を行っているようですが、残念ながら追加のものが必要です。

必要に応じて機能しない InstantLinks に関する 2 つの点は次のとおりです。

  • インデックスからドロップダウンに表示するフィールドを選択できますが (これはオートコンプリート機能ではできませんでした)、矢印キーを使用してドロップダウンのオプションを選択すると、選択したオプションが選択されません。テキストフィールドに表示します。

  • ドロップダウンからエントリを選択すると、別のページに移動し、その URL はインデックスから取得されたはずです。私がやりたいのは、元のテキスト フィールドに入力するために選択したエントリの値だけです。

そのため、残念ながら、InstantLinks が私が求めている機能をどのように提供してくれるのかわかりません。

4

2 に答える 2

1

わかりましたので、ようやく問題を解決する方法を見つけましたが、IndexTank が提供する Autocomplete または InstantLinks 機能を使用できませんでした。

要するに、私がしたことは、すぐに使用できる jQuery オートコンプリート ウィジェット (IndexTank オートコンプリートが内部で使用していることを知っています) を使用して、IndexTank インデックスをクエリする作成した安らかなサービスを呼び出すことでした。

最初に、Sinatra アプリケーションで安らかなサービスを作成しました

get '/index/' do
    term = params['term']

    #Query IndexTank index using the IndexTank::Client

    #Parse index search results and return an array of the suggestions as JSON
end

次に、jQuery オートコンプリート ウィジェットを使用して、Restful サービスをリモート ソースとして使用しました。まず、私の HTML 入力があります。

<form id="search_form" action="/" method="POST">
    <input id="search_field" name="search_field" type="text">
</form>

次に、オートコンプリート ウィジェットを入力にバインドする JavaScript:

$(document).ready(function(){
    $("#search_field").autocomplete({
      source: function(request, response) {
        $.ajax({
          url: "/index/",
          dataType: 'json',
          data: { term: request.term },
          success: function(data) {
            response($.map(data, function(item) {
              return {label: __highlight(item, request.term),
                value: item};
            }));
          }
        });
      },
      minLength: 2
    })
    .data( "autocomplete" )._renderItem = function( ul, item ) {
      // only change here was to replace .text() with .html()
      return $( "<li></li>" )
        .data( "item.autocomplete", item )
        .append( $( "<a></a>" ).html(item.label) )
        .appendTo( ul );
    };
  });

  function __highlight(s, t) {
    var matcher = new RegExp("("+$.ui.autocomplete.escapeRegex(t)+")", "ig" );
    return s.replace(matcher, "<strong>$1</strong>");
  }

これで、IndexTank インデックスを照会し、提案ドロップダウンに目的のインデックス フィールドを表示するオートコンプリート フィールドができました。

于 2011-08-10T14:14:51.123 に答える
0

代わりにInstantLinksを使用することをお勧めします。

本当にオートコンプリートを微調整したい場合は、Indextank Autocomplete に関連付けられた jQuery UI ウィジェットの _renderItem プロパティを変更する必要があります。

$("#query").data("autocomplete")._renderItem = function(ul, item) { .. }

例については、 jQuery UI Autocomplete のドキュメントを参照してください。

于 2011-07-27T02:27:48.597 に答える