轨道3.2 AJAX生活搜索 [英] rails 3.2 ajax live search

问题描述

我还是个Rails的学习和越来越绝望有关实施一个Ajax生活搜索。搜索似乎工作就提交，但不能在KEYUP。想不通为什么...

I'm still a Rails-Learner and getting desperate about implementing an ajax live search. The search seems to work on submitting, but not on keyup. Can't figure out why...

index.html.erb

index.html.erb

<%= form_tag contacts_path, :method => 'get', :id => "contacts_search" do %>
  <p>
    <%= text_field_tag :search, params[:search] %>
    <%= submit_tag "Search", :name => nil %>
  </p>
  <div id="cresults_div"><%= render 'cresults' %></div>
<% end %>

<%= link_to 'New Contact', new_contact_path %>

contacts_controller.rb

contacts_controller.rb

  def index
    @contacts = Contact.search(params[:search])

    respond_to do |format|
      format.html # index.html.erb
      format.json { render json: @contacts }
    end
  end

index.js.erb的

index.js.erb

$("#cresults_div").html("<%= escape_javascript(render("cresults")) %>");

contact.rb

contact.rb

  def self.search(search)
      if search
        where('last_name LIKE ?', "%#{search}%")
      else
        scoped
      end
  end

contacts.js.coffee

contacts.js.coffee

jQuery ->
  # Ajax search on submit
  $('#contacts_search').submit( ->
    $.get(this.action, $(this).serialize(), null, 'script')
    false
  )
  # Ajax search on keyup
  $('#contacts_search input').keyup( ->
    $.get($("#contacts_search").attr("action"), $("#contacts_search").serialize(), null, 'script')
    false
  )

_cresults.html.erb

_cresults.html.erb

<%= hidden_field_tag :direction, params[:direction] %>
<%= hidden_field_tag :sort, params[:sort] %>
<h1>Listing contacts</h1>

<table>
  <tr>
    <th>Salutation</th>
    <th>First name</th>
    <th>Last name</th>
    <th>Stree</th>
    <th>Street no</th>
    <th>Zip</th>
    <th>City</th>
    <th>State</th>
    <th>Country</th>
    <th>Phone</th>
    <th>Email</th>
    <th></th>
    <th></th>
    <th></th>
  </tr>

<% @contacts.each do |contact| %>
  <tr>
    <td><%= contact.salutation %></td>
    <td><%= contact.first_name %></td>
    <td><%= contact.last_name %></td>
    <td><%= contact.stree %></td>
    <td><%= contact.street_no %></td>
    <td><%= contact.zip %></td>
    <td><%= contact.city %></td>
    <td><%= contact.state %></td>
    <td><%= contact.country %></td>
    <td><%= contact.phone %></td>
    <td><%= contact.email %></td>
    <td><%= link_to 'Show', contact %></td>
    <td><%= link_to 'Edit', edit_contact_path(contact) %></td>
    <td><%= link_to 'Destroy', contact, confirm: 'Are you sure?', method: :delete %></td>
  </tr>
<% end %>
</table>

也试图更多附加 的application.js

also tried to additional add application.js

$(function() {
  $("#contacts_search input").keyup(function() {
    $.get($("#contacts_search").attr("action"), $("#contacts_search").serialize(), null, "script");
    return false;
  });
});

但生活搜索将无法启动打字......为什么？

But the live search won't start on typing... why?

推荐答案

在这种特殊情况下，我不得不删除

In this particular case I had to remove the

respond_to do |format|
  format.html # index.html.erb
  format.json { render json: @contacts }
end

从接触器的索引方法块

Block from the index-Method in the contacts controller

这篇关于轨道3.2 AJAX生活搜索的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！