title: RUBY ON RAILS: Why isn't typeahead autocomplete using searchkick/elasticsearch working?
body: <p>When I run the autocomplete functionality in the rails console, it works. But when I type in the search field on the browser, there is no drop down menu showing the autocomplete results. Here is my code. Any help is appreciated. I am new to this all, and teach myself by researching. </p>
  
  <p>routes.rb</p>
  
  <pre><code>Rails.application.routes.draw do
  
     resources :search_suggestions
     devise_for :users
  
     resources :posts do
  
     collection do
      get 'search'
      get 'autocomplete'
     end
  
    resources :reviews, except: [:show, :index]
  
  end
  
  root to: 'posts#index'
  # For details on the DSL available within this file, see      http://guides.rubyonrails.org/routing.html
  end
  </code></pre>
  
  <p>post.rb</p>
  
  <pre><code>class Post &lt; ApplicationRecord
  belongs_to :user
  has_many :reviews, dependent: :destroy
  searchkick autocomplete: [:title]
  has_attached_file :image, styles: { medium: "300x300#"}
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
  
  end
  </code></pre>
  
  <p>posts_controller.rb</p>
  
  <pre><code>class PostsController &lt; ApplicationController
   before_action :set_post, only: [:show, :edit, :update, :destroy]
   before_action :authenticate_user!, except: [:index, :show]
  
  
   def search
   if params[:search].present?
    @posts = Post.search(params[:search])
   else
    @posts = Post.all.order("created_at DESC")
   end
   end
  
   def autocomplete
    render json: Post.search(params[:search], autocomplete: true, limit:  10).map(&amp;:title)
   end
  
   # GET /posts
   # GET /posts.json
   def index
     @posts = Post.all.order("created_at DESC")
   end
  
   # GET /posts/1
   # GET /posts/1.json
   def show
   @reviews = Review.where(post_id: @post.id).order("created_at DESC")
  
  if @reviews.blank?
    @avg_review = 0
  else
    @avg_review = @reviews.average(:rating).round(2)
  end
  
  end
  
  # GET /posts/new
  def new
  @post = current_user.posts.build
  end
  
    # GET /posts/1/edit
  def edit
  end
  
    # POST /posts
    # POST /posts.json
  def create
  @post = current_user.posts.build(post_params)
  
  respond_to do |format|
    if @post.save
      format.html { redirect_to @post, notice: 'Post was successfully created.' }
      format.json { render :show, status: :created, location: @post }
    else
      format.html { render :new }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
  end
  end
  
  # PATCH/PUT /posts/1
  # PATCH/PUT /posts/1.json
  def update
  respond_to do |format|
    if @post.update(post_params)
      format.html { redirect_to @post, notice: 'Post was successfully updated.' }
      format.json { render :show, status: :ok, location: @post }
    else
      format.html { render :edit }
      format.json { render json: @post.errors, status: :unprocessable_entity }
    end
   end
  end
  
    # DELETE /posts/1
    # DELETE /posts/1.json
  def destroy
  @post.destroy
  respond_to do |format|
    format.html { redirect_to posts_url, notice: 'Post was successfully destroyed.' }
    format.json { head :no_content }
  end
  end
  
  private
  # Use callbacks to share common setup or constraints between actions.
  def set_post
    @post = Post.find(params[:id])
  end
  
  # Never trust parameters from the scary internet, only allow the white list through.
  def post_params
    params.require(:post).permit(:title, :content, :image)
  end
  end
  </code></pre>
  
  <p>posts.coffee</p>
  
  <pre><code>$("#search").typeahead({
  name: "post",
  remote: "/posts/autocomplete?search=%SEARCH"
  });
  </code></pre>
  
  <p>autocomplete.haml</p>
  
  <pre><code>= render 'layouts/header'
  </code></pre>
  
  <p>_header.haml</p>
  
  <pre><code>%nav.navbar.navbar-default.navbar-fixed-top
  .container-fluid
      .navbar-header
          %button.navbar-toggle.collapsed(type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false")
              %span.sr-only Toggle navigation
              %span.icon-bar
              %span.icon-bar
              %span.icon-bar
  
          = link_to "Brand", root_path, class: "navbar-brand"
  
      .collapse.navbar-collapse#bs-example-navbar-collapse-1
          %ul.nav.navbar-nav.navbar-right
              - if user_signed_in?
  
                  %li
                      = link_to current_user.username, edit_user_registration_path
  
                  %li
                      = link_to 'new', new_post_path 
  
                  %li
                      = link_to '', destroy_user_session_path, :method =&gt; :delete, data: { confirm: 'Are you sure you want to log out?' }, class: "  glyphicon glyphicon-off"
  
              - else
                  %li
                      = link_to "Sign Up", new_user_registration_path
                  %li
                      = link_to "Sign In", new_user_session_path
  
          = form_tag search_posts_path, method: :get, class: "navbar-form navbar-left", role: "search" do
              .input-group(style="max-width:181px;")
                  = text_field_tag :search, params[:search], placeholder: "search", id: "search", name: "search", class: "form-control", autocomplete: "off"
                  %span.input-group-btn 
                      %button.glyphicon.glyphicon-search.btn.btn-default(type="button") 
  
  
  %script
      $('.glyphicon-search').click(function(){ $('.navbar-left').submit()});
  </code></pre>