IndexTankオートコンプリート：返される結果ごとにオートコンプリートフィールドのテキストを変更する

Question

私はRuboku/SinatraアプリケーションをHerokuに配備しており、全文検索機能を提供するためにIndexTankプラグインを使用しています。テキストフィールドの文書の都市名と国の名前が含まれています。私は現在、IndexTank Autocomplete Documentation

あたりとしてボックスのオートコンプリート機能のうちを使用しています

現在、私はデフォルトでは、このようなことを私の文書をインデックス化しています。すなわち：

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

私はそれが実際の作業で行い、結果を返すデフォルトのオートコンプリートフィールドに検索、しかし、私は期待、または好きだろうではない何をしたとき。

フィールドに 'lon'と入力すると、「ロンドン」が返されます。これは確かに正しい文書ですが、私は実際に返信することを望んでいた 'ロンドンイングランド'。私は「経度」を検索するとき、それは「ロンドンイングランド」を表示するように、オートコンプリートフィールドのドロップダウンメニューでレンダリングされたデータを修正することについて行くか

は誰もが知っていますか？

---

UPDATE

コメントで示唆したように、私もInstantLinks機能を試してみましたが、これも非常には、私が何をする必要があるかないありません。両方のソリューションが必要なものの約80％を占めているようですが、残念ながら私は余分なものが必要です。

私が必要として動作しませんInstantLinks約2つのものがある：

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

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

残念ながら、私はInstantLinksが私の後にある機能をどのように与えるのか分かりません。

Answer 1

私は最終的に私の問題を解決する方法を試しましたが、私はIndexTankで提供されているオートコンプリートまたはInstantLink機能を使用することができませんでした。

簡単に言えば、IndexTankインデックスを照会するために作成した安らかなサービスを呼び出すために、jQueryオートコンプリートウィジェット（表紙の下でIndexTankオートコンプリートが使用されていることを知っています）を使用しました。私はシナトラアプリケーション

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のオートコンプリートウィジェットを使用しました。まず、私の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インデックスを照会し、表示するオートコンプリートフィールド提案内の目的のインデックスフィールドがドロップダウンします。

Answer 2

おそらくInstantLinksを使用します。

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

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

たとえば、jQuery UI Autocomplete documentationを参照してください。