Last active
November 11, 2015 11:51
-
-
Save richpeck/2310ff3ab1ffcd6a9138 to your computer and use it in GitHub Desktop.
LiveSearch (Firststop)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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: "£") %> | |
</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> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
$(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'); }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Product < ActiveRecord::Base | |
def self.search(search) | |
where("name LIKE ? OR description LIKE ?", "%#{search}%", "%#{search}%").take(5) | |
end | |
end |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
#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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
match 'search(/:search)', :to => 'products#search', :as => :search, via: [:get, :post] |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment