javascript - Rails 4.2 にライブ検索を追加するには?

Question

Rails 4.2 アプリケーションで AJAX に応答する単純な検索フォームを作成しようとしています。私は見つけることができるすべてのチュートリアルを試みましたが、それでも役に立ちません。

これは私の検索方法です：

  def self.search(search)
    search ? where('name LIKE ?', "%#{search}%") : all
  end

コントローラーでの私のインデックスアクション:

  # GET /ticket_types
  # GET /ticket_types.json
  def index
    @ticket_types = TicketType.search(params[:search]).order(sort_column + " " + sort_direction).paginate(per_page: 10, page: params[:page])
    respond_to do |format|
      format.html {render 'index'}
      format.json {render json: @ticket_types.map(&:name)}
    end
  end

私のフィルター:

  <form>
    <fieldset>
      <legend>Filter</legend>
        <%= form_tag path, remote: true, method: 'get', id: id do %>
          <%= hidden_field_tag :direction, params[:direction] %>
          <%= hidden_field_tag :sort, params[:sort]%>
          <p>
            <%= text_field_tag :search, params[:search], id: 'filter_search_autocomplete', data: {autocomplete_source: ticket_types_path} %>
            <%= render 'button_submit', name: nil, id:"search_button" %>
          </p>
        <% end %>
      </fieldset>
    </form>

送信ボタン:

  <%= submit_tag "Search", name: name, class: 'button', id: id, remote: true %>

私の ticket_types.coffee

jQuery ->
  $('#filter_search_autocomplete').autocomplete
  source: $('#filter_search_autocomplete').data('autocomplete-source')

そして私のインデックス部分：

<p id="notice"><%= notice %></p>

<%= render 'registry_filter', path: ticket_types_path, id: "ticket_search_filter" %>
<%= render 'ticket_types' %>
<br>
<section id="content-area"></section>
<div>
  <%= render 'button_link', button_name: "Create", path: new_ticket_type_path, id: 'create' %>
  <%= render 'button_link', button_name: "Back", path: ticket_types_path, id: 'back_button' %>
</div>

どうすれば Facebook のようなライブ検索ボックスを持つことができるかについてのアイデアはありますか? たとえば、ユーザーがボックスに文字を入力するたびに、指定された単語を含むレジストリの結果が約 5 件表示され、この検索アセットをパーシャルとして使用して、他のモデルのアプリケーション。前もって感謝します！

score 2 · Accepted Answer

私はあなたが達成しようとしていることと非常によく似た線に沿って何かをしました。

すべてをデータベースに保存している場合、私が行うことの 1 つは、Rails コントローラーでデータを json に変換することです。

データを json に変換したら、Rails フォームにオートコンプリート機能を持つ入力フィールドを作成するだけです。

その下で、json オブジェクトパスを data オプションに渡す必要があります。

例： <%= f.text_field :some_name, data: {autocomplete_source: some_name_path} %>

コントローラーでは、そのようなことを行う必要があります。Order と Where は、モデルで (推奨される方法で) スコープとして宣言できます。

  def index
    @some_name = SomeName.order(:field_name).where("feild_name like ?", "%#{params[:term]}%")

    respond_to do |f|
      f.json { render json: @some_names.map(&:field_name) }
    end
  end

上記の実装後に使用したツールは次のとおりです。

上記がお役に立てば幸いです。そうでない場合は、このRailscastのエピソードで正しい方向に進むことができます。

javascript - Rails 4.2 にライブ検索を追加するには?

1 に答える 1

Related

Reference