1

Ok so what I have is a library database system where a user can type in books in a search bar and then the books that match their search are displayed when they click enter. What I want to do is get it so that when the user types "a" into the search bar all records will be displayed in a drop down below the menu with the letter "a", and then when they input the next letter "l" all records with "al" will be displayed in a drop down, and then "ali", and so on. I do not have much knowledge of gems, but want to learn. Is their a way I can do this? I am using rails 4.0.1 and at the minute have a fuzzy search method.

  • [this](http://railscasts.com/episodes/102-auto-complete-association) railscast does what I think you are looking for. Check it out. – Jax Nov 07 '14 at 15:23
  • That Railscast is **very old** and will **not work** with Rails 4.x. (If you are a RailsCasts Pro subscriber, there is a [revised](http://railscasts.com/episodes/102-auto-complete-association-revised) video that uses jQuery UI.) – Substantial Nov 08 '14 at 08:55

2 Answers2

1

Or if you want to roll your own... This is the gist of it, might require a bit of tweaking:

routes.rb

get '/search' => 'search#autocomplete', as: :search_autocomplete

search_controller.rb

def autocomplete
  search_term = params[:search]
  @results = YourModel.where( "your_field LIKE search_term" )
  respond_to do |format|
    format.json @results
  end
end

your_view.html.erb

<%= form_tag( search_autocomplete_path, method: "get" ) do %>
  <%= text_field_tag( :search, params[:search], placeholder: 'Enter a search term...', :id => 'autocomplete_search' ) %>
  <%= submit_tag( "Go" ) %>
  <div id="autocomplete_search_results">
<% end %>

some_coffeescript_file.js.coffee

$( document ).ready ->
  $.ajax '/search',
        type: 'GET'
        parameters: $( "#autocomplete_search" ).val()
        dataType: 'json'
        success: ( data ) ->
            #  here you'll have to append the results to whichever div/container you have in place
            $( '#autocomplete_search_results' ).append "#{ data }"
NM Pennypacker
  • 6,704
  • 11
  • 36
  • 38
  • Ok so I've put your code in where I see relevant, but I have a problem with my routes.rb (I think). This is the code within it, including your code as the last line: MyBookshop2::Application.routes.draw do # The priority is based upon order of creation: first created -> highest priority. root 'products#index' # post from _search.html.erb 'partial' form, # map to the products controller search action post 'products/search', to: 'products#search' resources :products get '/search' => 'search#autocomplete', as: :search_autocomplete end –  Nov 07 '14 at 18:03
  • yeah, you might have to change the path or the controller/action if it conflicts with a route you already have. – NM Pennypacker Nov 07 '14 at 21:34
  • Hi @NickM thanks...its so easy why i could not think about it...one question though do we need a keyup event on the form input – sethi Jun 04 '15 at 04:50
0

Checkout Twitter typeahead.js jquery plugin https://github.com/yourabi/twitter-typeahead-rails.

dubadub
  • 3,312
  • 3
  • 23
  • 28