Question

我尝试在搜索中实施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"

创建控制器和模型：

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

Answer 1

这是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"上点击你的服务器，你的服务器将以json格式返回foo bar，而无需重新加载webbrowser，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

Rails：搜索表单中的jquery自动填充

1 个答案: