LiveSearch (Firststop)

_livesearch.html.erb

<div class="livesearch_container">
    	<table class="livesearch_results">
    		<%  unless search.blank? %>
    		
    			<% search.each_with_index do |item,i| %>
    			
    				<% pos ||= '' %>
    				<% if (i == 0) then pos = 'first' end %>
    				<% if (i == search.size - 1) then pos += ' last' end %>
    			
    				<tr data-link="<%= "/#{item.slug}" %>" class="<%= "#{pos}" %>">
    					<td class="image">
    						<% model = item.images.first || item.images.build %>
    						<%= image_tag(model.image.url(:thumb), :title => item.name, data: {"placement" => "left"}, :height => "85") %><br/>
    					</td>
    					<td class="information">
    						<%= link_to image_tag(item.brand.images.first.image.url(:thumb), :width => "55", :title => "View #{item.brand.name}"), "/#{item.brand.slug}", :class => "brand" if defined?(item.brand.images.first) %>
    						<div class="name"><%= link_to item.name, "/#{item.slug}" %></div>
    					</td>
    					<td class="price">
    						<%= number_to_currency(item.price, unit: "&pound;") %>
    					</td>
    				</tr>
    			<% end %>
    			
    			<tr class="results"><td colspan="3"><%= link_to "See all #{search.size} results here »", search_path(query) %></td></tr>
    			
    		<% else %>
    
    			<tr class="results"><td colspan="3"><%= link_to 'No results found', search_path(query) %></td></tr>
    			
    		<% end %>
    	</table> 
    </div>

application.js

    $(document).ready( function() {
    		
       var base_url = window.location.protocol + "//" + window.location.host;
    				
        $('#SearchSearch').searchbox({
    	   url: base_url + '/search/',
    	   param: 'search',
    	   dom_id: '#livesearch',
    	   loading_css: '#livesearch_loading'
        })		
    		
    });
    $(document).on('click', '#livesearch_del', function() {	$.searchbox.reset(); }) 
    $(document).on('submit', '#SearchForm', function() { $.searchbox.kill(); });
    $(document).on('click', '.livesearch_results tr', function() { window.location = $('a:first', this).attr('href'); });

livesearch.js

// Author: Ryan Heath
// http://rpheath.com

(function($) {
  $.searchbox = {}
  
  $.extend(true, $.searchbox, {
    settings: {
		url: 'search',
		param: 'search',
		dom_id: '#livesearch',
		minChars: 2,
		loading_css: '#livesearch_loading',
		del_id: '#livesearch_del'
    },
	
	loading: function() {
		$($.searchbox.settings.loading_css).show()
	},
	
	idle: function() {
		$($.searchbox.settings.loading_css).hide()
	},
	
	start: function() {
      $.searchbox.loading()
      $(document).trigger('before.searchbox')
    },
	
	stop: function() {
      $.searchbox.idle()
      $(document).trigger('after.searchbox')
    },
	
	kill: function() {
		$($.searchbox.settings.dom_id).fadeOut(50)
		$($.searchbox.settings.dom_id).html('')
		$($.searchbox.settings.del_id).fadeOut(100)
	},
	
	reset: function() {
		$($.searchbox.settings.dom_id).html('')
		$($.searchbox.settings.dom_id).fadeOut(50)
		$('#SearchSearch').val('')
		$($.searchbox.settings.del_id).fadeOut(100)
	},
        
    process: function(terms) {
		
		if(/\S/.test(terms)) {
			$.ajax({
					type: 'GET',
					url:  $.searchbox.settings.url,
					data: {search: terms.trim()},
					complete: function(data) {	
						$($.searchbox.settings.del_id).fadeIn(50)
						$($.searchbox.settings.dom_id).html(data.responseText)
						
						if (!$($.searchbox.settings.dom_id).is(':empty')) {
							$($.searchbox.settings.dom_id).fadeIn(100)
						}
						
						$.searchbox.stop();
					}
				});
			return false;
		}else{
			$.searchbox.kill();
		}
	}
  });


  
	$.fn.searchbox = function(config) {
		var settings = $.extend(true, $.searchbox.settings, config || {})
		
		$(document).trigger('init.searchbox')
   		$.searchbox.idle()
			
		return this.each(function() {
			var $input = $(this)
		  
			$input
			.keyup(function() {	
				if ($input.val() != this.previousValue) {
					
					if(/\S/.test($input.val().trim()) &&  $input.val().trim().length > $.searchbox.settings.minChars){ 
						$.searchbox.start()
						$.searchbox.process($input.val())
					}else{
						$.searchbox.kill()
					}
					
					this.previousValue = $input.val()
					
				}
			})
		})
	}
})(jQuery);

product.rb

class Product < ActiveRecord::Base
    def self.search(search)
    	where("name LIKE ? OR description LIKE ?", "%#{search}%",  "%#{search}%").take(5)
    end
end

products_controller.rb

#app/controllers/product_controller.rb
class ProductsController < ApplicationController
	def search 		
		@products = Product.search params[:search]
		respond_to do |format|
			format.js 	{ render :partial => "elements/livesearch", :locals => {:search => @products, :query => params[:search]} }
			format.html { 
				render :index
			}
		end
	end
end

routes.rb

match 'search(/:search)', :to => 'products#search', :as => :search, via: [:get, :post]