Rails:搜索表单中的jquery自动完成

Posted

技术标签:

【中文标题】Rails:搜索表单中的jquery自动完成【英文标题】:Rails: jquery autocomplete in a search form 【发布时间】:2018-04-26 00:31:29 【问题描述】:

我正在尝试在搜索中实现 jquery autocomplete,但没有出现自动完成下拉建议。

这是我在item.rb 中的基本搜索:

def self.search(term)
  return where("0=1") if term !~ /\w4/
  where("lower(title) LIKE lower(:term)", term: "%#term%")
end

application.html.erb 里面我有<%= javascript_include_tag 'application' %>

现在这是我关于自动完成的设置......我的应用程序上有一个 sass 引导设置,这是我迄今为止所做的:

安装了gem 'jquery-ui-sass-rails'

在我的application.js 文件中添加了//= require jquery.ui.all

items.cooffee 文件中添加了以下 jQuery

jQuery ->
  $('#search').autocomplete
    source: "/search_suggestions"

创建了控制器和模型:

rails g resource search_suggestion term popularity:integer
rails db:migrate

class SearchSuggestionsController < ApplicationController
  def index
    render json: SearchSuggestion.terms_for(params[:term])
  end
end

class SearchSuggestion < ApplicationRecord

  def self.terms_for(prefix)
    suggestions = where("term like ?", "#prefix_%")
    suggestions.order("popularity desc").limit(10).pluck(:term)
  end

  def self.index_items
    Item.find_each do |item|
      index_term(item.title)
      item.title.split.each  |t| index_term(t) 
      index_term(item.category)
    end
  end

  def self.index_term(term)
    where(term: term.to_s.downcase.gsub(/\s+/, '')).first_or_initialize.tap do |suggestion|
      suggestion.increment! :popularity
    end
  end
end

创建并测试了以下 rake 任务

search_suggestions.rake

namespace :search_suggestions do
  desc "Generate search suggestions from items"
  task :index => :environment do
    SearchSuggestion.index_items
  end
end

最终搜索表单如下所示:

<%= form_tag items_path, method: :get do %>
   <%= text_field_tag :search, params[:search], autofocus: true, placeholder: 'Enter keyword', data: autocomplete_source: items_path , :class=> "search-query search_size" %>
      <%= submit_tag 'Search', :style => "display: none;" %>

有什么我可能在这里遗漏的想法吗?

更新 1

我把 gem 改成了gem 'jquery-ui-rails'

并将其包含在 application.js 文件中:

//= require rails-ujs
//= require jquery-ui/widgets/autocomplete
//= require bootstrap-sprockets
//= require_tree

如果我加载页面并检查 jQuery 的源代码似乎已加载,所以我不知道出了什么问题!!

<script src="/assets/rails-ujs.self-817d9a8cb641f7125060cb18fefada3f35339170767c4e003105f92d4c204e39.js?body=1"></script>
<script src="/assets/jquery-ui/version.self-c8e3d1203da26ea7efdf83c1eabb3f0ba55cb68e463f5ccf0d77bd15ce6a8e61.js?body=1"></script>
<script src="/assets/jquery-ui/keycode.self-ad63cd20acf49dd333bbbc537454d7d475bd610eb5b88de0dca009f0c3d314b1.js?body=1"></script>
<script src="/assets/jquery-ui/position.self-1b49c8c521e67a4a88bfdad6b4d944d33686d25009a0e40a1e170acdd7b6962a.js?body=1"></script>
<script src="/assets/jquery-ui/safe-active-element.self-a1f1a1a7dae3269ce03f6fffb2dcc9b4a7490f5d546c65d54417bec3be24b668.js?body=1"></script>
<script src="/assets/jquery-ui/unique-id.self-66e85ac85cd0b6b8b1bb89369fc65f608f716869dc0930862a8d421a57a9580a.js?body=1"></script>
<script src="/assets/jquery-ui/widget.self-fca20bcec06d192f97cffa6e734e24360e227237b8ae7d7e7e60754df7d5444f.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/menu.self-0730fe713007bd93e6db569352a20ed92448299505ff6f525bc0dc6dd488254e.js?body=1"></script>
<script src="/assets/jquery-ui/widgets/autocomplete.self-6a89d7a43741ec810ef95de143a7c0297e2e4368ebecff64493ebb7a9ac3a524.js?body=1"></script

【问题讨论】:

你在使用 turbolinks 吗?你有错误信息吗?否则你能给我们一些关于你的测试的信息,比如$('#search').autocomplete被调用了吗?如果是,请告诉我们,否则您是否从/search_suggestions 检索搜索建议?如果没有,您的rake routes 看起来如何?您能告诉我们:1)搜索建议在哪里生成? 2)你如何检索它们?我不清楚source: "/search_suggestions" 在做什么?获取请求? 感谢@Fabrizio Bertoglio 的回复。我已经尝试解决这个问题一段时间了。回答您的问题:不,我没有使用 turbolinks。似乎没有调用$('#search').autocomplete 。路线是:resources :search_suggestions,基本上这是我遵循的实现这个railscasts.com/episodes/… 我不使用jquery-ui-sass-rails,而是使用jquery-ui-rails gem。事实是 gem 通常无法工作并且不会加载这些资产,所以我最终从 api.jqueryui.com/1.11 手动导入了我的 jquery-ui 资产我的问题是,1)你的页面中有 jquery-ui 资产吗? Inspect 你的页面,然后继续 sources 看看。你的自动补全功能依赖于以下js文件github.com/jquery/jquery-ui/blob/… 和下面的和github.com/jhilden/jquery-ui-sass-rails/blob/master/… 然后控制你的浏览器控制台中没有错误信息 感谢@Fabrizio Bertoglio 的信息。我用更多信息更新了我的问题,请随时查看信息! 【参考方案1】:

这是erb代码的形式

<%= form_tag products_path, method: :get do %> 
    <%= text_field_tag :search, params[:search], size: 30 %> 
<%= submit_tag "Search", name: nil %>

对于这个元素

使用您的开发人员收费检查该元素并检查从erb 代码&lt;%= text_field_tag :search, params[:search], size: 30 %&gt; 生成的 id

这只是一个例子,我没有你的应用程序。在 chrome 上,您只需使用快捷方式 CTRL + SHIFT + c,然后用鼠标单击您要检查的元素(在本例中为输入表单)

开发者工具栏弹出已经选择了那个div,你也可以右键单击然后用鼠标检查

我相信text_field_tag :search 应该有id: 'search',但是您在控制台中收到有关变量的错误。

在您的 chrome 开发人员工具栏控制台 $('#search') 上测试它,看看它是否返回错误或与 &lt;input id='search'&gt; 关联的 Javascript 对象

也许还有其他原因。您想知道这是否连接到jquery-ui,然后检查您的 chrome 开发人员工具源中的资产管道中是否有 jquery-ui 资产

或者进入你的控制台,在你的页面中测试jquery-ui effect

$( "div" ).effect( "bounce", "slow" );

调试这个,

首先。看看你是否可以在这段代码中触发断点

$('#search').autocomplete 

second.测试是否可以在这段代码中触发断点

class SearchSuggestionsController < ApplicationController
  def index
    binding.pry
    render json: %w[foo bar]
  end
end

您还需要了解,要实现这一点,您的应用正在使用 AJAX 异步请求,因此您的页面无需刷新即可调用服务器并获取响应 json: %w[foo bar] 并在搜索建议中显示元素

这就是您在jquery-ui 效果中调用source: "/search_suggestions" 的原因,因为这是您client/jquery 期望检索search 结果的地方

Jquery 将访问您的服务器,网址为 source: "/search_suggestions",您的服务器将以 json 格式返回 foo bar,无需重新加载网络浏览器,jquery 将显示它

这在ruby on rails documentation 和几个视频中都有很好的解释

https://www.youtube.com/watch?v=I0crKwijP0Q

https://www.youtube.com/watch?v=FBxVN7U1Qsk

https://www.youtube.com/watch?v=fEYx8dQr_cQ&t=4s

我可以继续编写代码来快速解决您的问题,但事实是,如果您不进行必要的培训并了解此功能背后的概念和架构,您将永远无法自给自足

AJAX 非常酷,我真的希望你喜欢这些视频

祝你好运 再见 法布里奇奥

【讨论】:

感谢@Fabrizio Bertoglio 的帮助和指点......现在我正在做其他事情,但我会让你知道当我实现你的指点时会发生什么!

以上是关于Rails:搜索表单中的jquery自动完成的主要内容,如果未能解决你的问题,请参考以下文章

将 Amadeus 机场和城市搜索自动完成添加到 Rails 应用程序

带有嵌套属性的 Rails Jquery-ui 自动完成

Rails 4 / jQuery:需要在表单输入中输入值以自动填充其他输入

Rails 3.2.1 Jquery 自动完成

Rails jQuery 自动完成和动态嵌套字段

使用 COCOON Rails 3 在动态字段中自动完成 Jquery