9

Rails アプリケーションのテキスト入力フィールドに「提案」機能を実装する最も簡単な方法を探しています。アイデアは、データベース列に保存されている名前を完成させ、ユーザーが入力するときに可能な一致のドロップダウン メニューを提供することです。

ご提案ありがとうございます。

4

5 に答える 5

8

Rails では、このメソッドを使用して、テキスト フィールドでの「suggest」スタイルのオートコンプリートを非常に簡単に行うことができますtext_field_with_auto_complete。

Rails 1.x ではこのメソッドは に組み込まれてActionView::Helpers::JavaScriptMacrosHelperいましたが、Rails 2.x では別のプラグインに移動されました。

Postというテキスト フィールドを持つ というモデルがあるとしますtitle。通常はtext_field_tag(またはf.text_field) を使用するビューでは、text_field_with_auto_complete代わりに次のように使用します。

<%= text_field_with_auto_complete :post, :title %>

さらに、 ではPostsController、対応する宣言を行う必要があります。

class PostsController < ApplicationController
  auto_complete_for :post, :title
end

これが舞台裏で行うauto_complete_for_[object]_[method]ことは、コントローラーに呼び出されるアクションを動的に追加することです。上記の例では、このアクションは と呼ばれauto_complete_for_post_titleます。

findこの自動生成されたアクションによって使用される呼び出しは、すべてのモデル オブジェクトにわたって機能することに注意してPost.find(:all, ...)ください。これが必要な動作でない場合 (たとえば、Postログインしているユーザーに基づいて検索を特定のサブセットに制限したい場合) auto_complete_for_[object]_[method]、コントローラーで独自のアクションを定義する必要があります。

于 2008-10-14T14:26:55.877 に答える
5

Ruby on Rails にはPrototype フレームワークが用意されています。このフレームワークはScript.aculo.usによって使用され、探している機能を提供するオートコンプリート コントロールを提供します。

于 2008-10-11T19:07:35.843 に答える
1

Railsのほとんどのものと同様に、これを行うにはいくつかの方法があります。Railsにはオートコンプリートヘルパーのセットが組み込まれていましたが、その機能はauto_completeプラグインから削除されました。これは、実装したいものを取得するための最も簡単な方法である可能性があります-コントローラーの単純なコマンド、ビューのいくつかの単純なもの-ta-dah。このソリューションを使用するには、プラグインをアプリにインストールする必要があります。このページを参照して、プラグインをインストールして開始するために知っておく必要のあるすべてのことを説明しています。

別の回答で述べたように、このルートを進むと、Railsにバンドルされているプロトタイプとスクリプト化されたAJAXフレームワークが利用されます。この機能を実現するのに役立つ他のAJAXフレームワーク、特にJQueryもありますが、プラグインを使用するだけでなく、それらを使用するための学習をさらに強化することができます。

于 2008-10-11T23:46:48.603 に答える
1

編集：この回答は一種の理論的な基準点としてここに残しますが、オートコンプリータの回答の方が役立つ可能性が高いようです:)

免責事項: 私は Google (さまざまな UI に「提案」要素があることは明らかです) で働いていますが、この領域のコードを見ていませんし、クライアント側の側面について誰とも話していません。

ここでは、サーバー側の言語はおそらく関係ありません。重要なのは、クライアント側で必要な AJAX です。

ユーザーがテキストボックスにキーストロークを入力するたびにリセットされ、ユーザーがテキストボックスから移動するとキャンセルされる約1秒のタイマー（スイートスポットを見つけるための実験）を用意することをお勧めします。タイマーが起動したら、AJAX リクエストを起動させます。AJAX 要求には、ユーザーがこれまでに入力した内容が含まれます。AJAX 応答は、提案のリストと元の要求テキストである必要があります。

AJAX 応答が返されたときに、テキスト ボックス内のテキストが応答内のフィールドと同じである場合 (つまり、ユーザーがそれ以降入力していない場合) で、テキスト ボックスにまだフォーカスがある場合は、ドロップダウンを提供します。(この側面を行うには、HTML コンボボックスに関するサンプル ページが数百ある必要があります。)

サーバーが行う必要があるのは、検索を実行して応答を適切にフォーマットすることにより、AJAX 要求に応答することだけです。これは、クライアント側よりもはるかに簡単です。

お役に立てば幸いです - サンプル コードがなくて申し訳ありませんが、かなり複雑で、私は実際には JavaScript 開発者ではありません。

于 2008-10-11T19:08:37.150 に答える
1

このもう少し手動のアプローチを試すこともできます

# your_view.rhtml

<%= text_field 'contact', 'name', :id => 'suggest' %>
<div id='dropdown' style='display:none; z-index: 100; background: #FFFFFF'></div>

<script>
  new Ajax.Autocompleter('suggest', 'dropdown', "<%= url_for :controller => 'contacts', :action => 'suggest_name' %>") 
</script>

# contacts_controller.rb

def suggest_name
  query_string = params[:contact][:name]
  @contacts = Contact.find.all :conditions => ['name ilike ?', "%#{query_string}%"]
  render :partial => 'name_suggestions'
end

# contacts/_name_suggestions.rhtml

<ul>
<% for contact in @contacts %>
  <li><%= contact.name %></li>
<% end %>
</ul>
于 2008-10-14T02:00:02.170 に答える