将自动完成功能添加到Rails项目中的导航栏

Question

我正在运行一个Rails项目，该项目包含所有页面上的Navgation栏。我还在导航栏上有一个用于搜索目的的输入标记，但是如何在特定搜索栏中实现自动完成。

我尝试使用rails-jquery-autocomplete并按照它的要求实现，但不幸的是它对我没用。屏幕上或控制台上没有可见的搜索结果

brands_controller.rb

class Admin::BrandsController < Admin::AdminController
  autocomplete :brand, :name
end

的routes.rb

resources :brands, param: :uuid do
  get :autocomplete_brand_name, :on => :collection
end

_navigationbar.html.erb

<form class="navbar-form pull-left" role="search">
   <div class="form-group">
      <input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="<%=autocomplete_brand_name_admin_brands_path%>">
   </div>
</form>

的Gemfile

gem 'rails', '~> 5.0.0'
gem 'rails-jquery-autocomplete'
gem 'jquery-rails'

的application.js

//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require autocomplete-rails

生成的HTML：

<div class="form-group">
   <input type="text" class="form-control search-bar" placeholder="Type here for search..." data-autocomplete="/admin/brands/autocomplete_brand_name">
</div>

Answer 1

您在application.js中缺少//= require jquery-ui/autocomplete。将application.js更新为

//= require jquery
//= require jquery_ujs
//= require moltran/modernizr.min
//= require moltran/bootstrap.min
//= require tagsinput/jquery.tagsinput.min.js
//= require jquery-ui/autocomplete
//= require autocomplete-rails

在你的gemfile中添加

gem 'jquery-ui-rails'

还用

替换输入标记

<%=autocomplete_field_tag 'search', '', autocomplete_brand_name_admin_brands_path %>