我正在尝试实现jquery autocomplete
在搜索中,但不会出现自动完成下拉建议。
这是我在 item.rb
中进行的基本搜索:
def self.search(term)
return where("0=1") if term !~ /\w{4}/
where("lower(title) LIKE lower(:term)", term: "%#{term}%")
end
以及 application.html.erb
内我有<%= javascript_include_tag 'application' %>
现在这是我关于自动完成的设置......我的应用程序上有一个 sass Bootstrap 设置,这就是我迄今为止所做的:
安装了gem 'jquery-ui-sass-rails'
.
已添加//= require jquery.ui.all
在我的application.js
文件。
在 items.cooffee
中添加了以下 jQuery文件
jQuery ->
$('#search').autocomplete
source: "/search_suggestions"
创建 Controller 和模型:
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 任务
搜索建议.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
最佳答案
这是表格erb
代码
<%= form_tag products_path, method: :get do %>
<%= text_field_tag :search, params[:search], size: 30 %>
<%= submit_tag "Search", name: nil %>
对于这个元素
与您的开发人员一起检查该元素并检查从erb
生成的ID代码<%= text_field_tag :search, params[:search], size: 30 %>
这只是一个示例,我没有您的应用程序。在 Chrome 上,您只需使用快捷方式 CTRL + SHIFT + c
然后用鼠标单击要检查的元素(在本例中为输入表单)
弹出的开发者工具栏已经选择了该div,您也可以右键单击然后用鼠标检查
我相信text_field_tag :search
应该有id: 'search'
,但是您在控制台中收到有关该变量的错误。
在 Chrome 开发者工具栏控制台上测试一下 $('#search')
并查看它是否返回错误或 Javascript
与 <input id='search'>
关联的对象
也许还有别的原因。您想知道这是否连接到 jquery-ui
,然后检查 chrome 开发者工具源中的资源管道中是否有 jquery-ui 资源
或者进入控制台,测试 jquery-ui effect在您的页面中
$( "div" ).effect( "bounce", "slow" );
调试这个,
首先。看看是否可以在此代码中触发断点
$('#search').autocomplete
第二。测试是否可以在此代码中触发断点
class SearchSuggestionsController < ApplicationController
def index
binding.pry
render json: %w[foo bar]
end
end
您还需要了解,为了实现此目的,您的应用程序正在使用 AJAX
异步请求,让你的页面无需刷新就调用服务器并获取响应json: %w[foo bar]
以及要在搜索建议中显示的元素
这就是您调用 source: "/search_suggestions"
的原因在你的jquery-ui
效果,因为那就是你 client
/jquery
期望检索 search
结果
Jquery 将通过 URL source: "/search_suggestions"
访问您的服务器你的服务器将返回 foo bar
json格式,无需重新加载浏览器,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 非常酷,我真的希望您喜欢这些视频
祝你好运 再见 法布里齐奥
关于javascript - rails : jquery autocomplete in a search form,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47262408/