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

我试图在搜索中实现

jquery autocomplete

，但是自动完成下拉列表建议没有出现

这是我在

项中的基本搜索。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

中，我有

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

安装了

gem'jqueryui-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

最后，搜索表单如下所示：

<%= 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;" %>

如果我加载页面并检查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
code

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

调试这个,

首先。找出是否可以在此代码中触发断点

$('#search').autocomplete 

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

秒。测试是否可以在此代码中触发断点

$('#search').autocomplete 

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

class SearchSuggestionController

您还需要了解，要实现这一点，您的应用程序使用的是
AJAX
异步请求，因此您的页面在不刷新的情况下调用服务器并获得响应
json:%w[foo bar]
，其中包含要在搜索建议中显示的元素

这就是为什么您在
jqueryui
效果中调用
source:“/search\u suggestions”
，因为您的
client
/
jquery
希望从中检索
搜索
结果

Jquery将在url
source:“/search\u suggestions”
点击您的服务器，您的服务器将返回json格式的
foo bar
，而不重新加载webbrowser，Jquery将显示它

这在网上和几个视频中都有很好的解释




我可以不断地编写代码来快速解决您的问题，但现实是，如果您不进行必要的培训，不理解此功能背后的概念和体系结构，您将永远无法自动满足要求

阿贾克斯是超级酷，我真的希望你喜欢这些视频

祝你好运
再见
Fabrizio
您是否使用TurboLink？你有错误信息吗？否则，您可以给我们一些关于您的测试的信息，比如is
$（“#search”）。调用autocomplete
？如果是，请告诉我们，否则您是否正在从
/search\u suggestions
检索搜索建议？如果没有，您的
rake routes
看起来如何？您能否告诉我们：1）在哪里生成搜索建议？2） 你如何取回它们？我不清楚
源代码：“/search\u suggestions”
在做什么？get请求？谢谢@Fabrizio Bertoglio.的回复。。我已经尝试解决这个问题有一段时间了。回答你的问题：不，我没有使用涡轮链接。似乎没有调用
$（“#搜索”）.autocomplete
。路径是：
resources:search\u suggestions
，基本上这就是我所遵循的实现方法，我不使用
jqueryui-sass-rails
，而是使用
jqueryui-rails
gem。事实上，gem通常不会工作，也不会加载这些资产，所以我最终手动导入了我的
jqueryui
资产，我的问题是：1）页面中有jqueryui资产吗<代码>检查

您的页面，然后继续查看

来源

。您的自动完成功能取决于以下js文件和以下命令，然后控制您的浏览器控制台中没有关于info@Fabrizio Bertoglio的错误消息。。我用更多信息更新了我的问题，请随意查看信息！谢谢你的帮助和指点@Fabrizio Bertoglio。。。现在我正在做其他事情，但我会让你知道当我实现你的指针时会发生什么！

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