Incremental search in Sinatra App

Question

I want to make an incremental search/real time search option in an Sinatra app that I am developing. I am using data_mapper as ORM and the html with Haml. I am experieced with Ruby, buth Sinatra is new to me.

I want a search field, where a list of results are presented when typing characters in the search field, as we know it from i.e. google. I was hoping to send back the characters from the search field to the Sinatra app to do a data_mapper query as shown in the Sinatra part below:

get '/car' do
    @cars = CarDb.all(:reg_nr.like => '#{chars_from_srcBox_id}%') 
    haml :car    
end

car.haml:

!!!
 %html
  %head
    %title Sinatra App
     %link(rel='stylesheet' href='views/style.css')
     %link(href='http://fonts.googleapis.com/css?family=Roboto:400,300' rel='stylesheet' type='text/css')
  %body 
    %form{ :class => "formContainer", :action => "", :method => "post"}
      %fieldset
        %ol
          %ul(style="list-style-type:none")
            %li
              %label{:for => ":car_search"} Search Car.:
              %input{:type =>"carData", :name => "car_search", :class => "txtBox", :id=> srcBox}

    %ul(style="list-style-type:none")
      - @cars.each do |c|
        %li
         = "#{c.reg_nr} - #{c.car_make} #{c.car_model}"

I guess I would need some JavaScript/Coffescript to send back characters from the search field to the Sinatra app?? How do I link Sinatra with JavaScript?

I ran into gon-sinatra, could this be what I need or are there any more obvious choices?

Br Peter

Answer 1

If assume the "incremental search" and "autocomplete" are mostly same things try to combine AJAX functionality in Sinatra (you can find examples in answer here) on server side with for example typeahead.js JavaScript library on client side.

Here are other interesting client side libraries:

• Here you can find true incremental approach i.e. when suggested word fully prefilled in input field http://www.pengoworks.com/workshop/jquery/autocomplete.htm
• Native jQuery UI component http://jqueryui.com/autocomplete/
• https://www.devbridge.com/sourcery/components/jquery-autocomplete/