在 Rails 中使用 will_paginate 和 AJAX 实时搜索和 jQuery

Posted 2023-02-19

【中文标题】在 Rails 中使用 will_paginate 和 AJAX 实时搜索和 jQuery

【英文标题】：Using will_paginate with AJAX live search with jQuery in Rails

【发布时间】：2011-02-01 14:24:29

【问题描述】：

我正在使用 will_paginate 成功地对记录进行分页。我还通过 jQuery 使用 AJAX 实时搜索来更新我的结果 div。到目前为止没有问题。我遇到的问题是在尝试对这些实时搜索结果进行分页时。我只是得到“页面正在加载......”而没有 div 更新。我错过了一些基本的东西吗？我相信我可能还需要通过 jQuery 以某种方式绑定分页链接的点击事件。

# index.html.erb

  <form id="searchform" accept-charset="utf-8" method="get" action="/search">
    Search: <input id="search" name="search" type="text" autocomplete="off" title="Search location, company, description..." />      
   <%= image_tag("spinner.gif", :id => "spinner", :style =>"display: none;" ) %>  
  </form>

# JobsController#search

def search
    if params[:search].nil?
      @jobs = Job.paginate :page => params[:page], :order => "created_at desc"
    elsif params[:search] and request.xhr?
      @jobs = Job.search params[:search], params[:page]
    end
    render :partial => "jobs", :layout => false, :locals =>  :jobs => @jobs 
  end

# Job#search

def self.search(search, page)
    logger.debug "Job.paginate #search, #page"
    paginate :per_page => @@per_page, :page => page,
             :conditions => ["description LIKE ? or title LIKE ? or company LIKE ?", 
               "%#search%", "%#search%", "%#search%"], 
               :order => 'created_at DESC'
  end

# search.js

$(document).ready(function()

  $("#search").keyup(function() 
    $("#spinner").show(); // show the spinner
    var form = $(this).parents("form"); // grab the form wrapping the search bar.
    var url = form.attr("action"); // grab the URL from the form's action value.
    var formData = form.serialize(); // grab the data in the form
    $.get(url, formData, function(html)  // perform an AJAX get, the trailing function is what happens on successful get.
      $("#spinner").hide(); // hide the spinner
      $("#jobs").html(html); // replace the "results" div with the result of action taken
    );
  );

);

【问题讨论】：

另外，只是好奇你为什么没有keyup功能的延迟？通常，您希望实时搜索等到用户暂停几百毫秒后再运行 get，对吧？

【参考方案1】：

如果微调器永远不会被隐藏，很可能是对 /search 的请求失败 - 请检查您的 log/development.log。如果未提供 :page 参数，您可能希望默认它：

page = params[:page] || 1