Railsでは、名前を表示してIDを使用するオートコンプリートを取得する最も良い方法は何ですか？

Question

ユーザーが入力可能なテキストボックスに、モデル名のAjaxが埋め込まれたリストが表示されます。ユーザーがモデルを選択すると、HTMLでモデルのIDを保存し、フォーム提出されます。

私はRails 2で切り取られたauto_completeプラグインを見つけましたが、これは役に立つかもしれないと思われます。そのプラグインの使用方法についてはRailscast episodeがありますが、このトピックでは触れません。コメントpoint out that it could be an issueとpoint to model_auto_completer as a possible solutionは、表示されたアイテムが単純な文字列の場合には機能しているように見えますが、挿入されたテキストには、リストアイテムにピクチャを含めたい場合には、沢山の迷惑スペースが含まれます（despite what the documentation says）。

私はおそらくmodel_auto_completerを形状にハックする可能性がありますが、それでもやり遂げる可能性がありますが、より良いオプションがあるかどうかを確かめるために熱心です。

Answer 1

私は、画像からの迷惑メールのための奇妙な修正があります。 model_auto_completerのオプションハッシュに:after_update_element => "trimSelectedItem"を追加しました（これは3つのうち最初のハッシュです）。私trimSelectedItemは、適切なサブ要素を検索し、要素値のためにその内容を使用しています。

function trimSelectedItem(element, value, hiddenField, modelID) { 
    var span = value.down('span.display-text') 
    console.log(span) 
    var text = span.innerText || span.textContent 
    console.log(text) 
    element.value = text 
} 

しかし、これはその後、抵触デフォルトでは、すぐにテキストとして戻ってテキストを変更:allow_free_textオプションの走ります内部のテキストがリストの「有効な」項目でない場合、ボックスはフォーカスを失います。だから私は、オプションのハッシュ（再び、最初のハッシュ）に:allow_free_text => trueを渡すことによって、あまりにも、それをオフにする必要がありました。私は本当にそれが残っていると思う。

だから、自動入力補完を作成するために私の現在の呼び出しは次のようになります。

<%= model_auto_completer(
    "line_items_info[][name]", "", 
    "line_items_info[][id]", "", 
    {:url => formatted_products_path(:js), 
    :after_update_element => "trimSelectedItem", 
    :allow_free_text => true}, 
    {:class => 'product-selector'}, 
    {:method => 'GET', :param_name => 'q'}) %> 

や製品/ index.js.erbは次のとおりです。

<ul class='products'> 
    <%- for product in @products -%> 
    <li id="<%= dom_id(product) %>"> 
      <%= image_tag image_product_path(product), :alt => "" %> 
      <span class='display-text'><%=h product.name %></span> 
    </li> 
    <%- end -%> 
</ul> 

Answer 2

私は自分自身を転がしました。プロセスはちょっと複雑ですが、...

私はちょうどオブザーバーでフォーム上にtext_fieldを作成しました。テキストフィールドに入力を開始すると、オブザーバーは検索文字列を送信し、コントローラーはオブジェクトのリストを返します（最大10文字）。

オブジェクトは、動的オートコンプリート検索結果を埋め込む部分を介してレンダリングするために送信されます。この部分は、コントローラに再びポストバックするlink_to_remote行を実際に投入します。 link_to_remoteは、ユーザーの選択のIDを送信し、その後、いくつかのRJSは、検索をクリーンアップし、テキストフィールドに名前を記入した後、非表示のフォームフィールドに選択したIDを配置します。

ふう...私は一度これを行うためのプラグインを見つけることができませんでしたので、私は自分自身をロール、私は理にかなっているすべてを願っています。