Add autocomplete to the navigation bar in Rails Project

Question

I'm running a Rails project which consists of Navgation bar on all the pages. I also have a input tag on the nav bar for searching purpose, but how to implement autocomplete in the particular search bar.

I tried using rails-jquery-autocomplete and implemented the way it asked but unfortunately it didn't worked for me. No search result are visible on screen or on console

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

Generated 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

You are missing //= require jquery-ui/autocomplete in application.js. Update application.js to

//= 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

In your gemfile add

gem 'jquery-ui-rails'

Also replace input tag with

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