Commit 978299431c7a0b59c4544321fedd8cd08e4296fe

Authored by Braulio Bhavamitra
1 parent ee80381a

Search category with an autocomplete

(ActionItem3149)
app/controllers/my_profile/manage_products_controller.rb
... ... @@ -35,7 +35,7 @@ class ManageProductsController < ApplicationController
35 35 end
36 36  
37 37 def categories_for_selection
38   - @category = Category.find(params[:category_id]) if params[:category_id]
  38 + @category = environment.categories.find_by_id params[:category_id]
39 39 @object_name = params[:object_name]
40 40 if @category
41 41 @categories = @category.children
... ... @@ -95,6 +95,20 @@ class ManageProductsController < ApplicationController
95 95 end
96 96 end
97 97  
  98 + def show_category_tree
  99 + @category = environment.categories.find params[:category_id]
  100 + render :partial => 'selected_category_tree'
  101 + end
  102 +
  103 + def search_categories
  104 + @term = params[:term].downcase
  105 + conditions = ['LOWER(name) LIKE ? OR LOWER(name) LIKE ?', "#{@term}%", "% #{@term}%"]
  106 + @categories = ProductCategory.all :conditions => conditions, :limit => 10
  107 + render :json => (@categories.map do |category|
  108 + {:label => category.name, :value => category.id}
  109 + end)
  110 + end
  111 +
98 112 def add_input
99 113 @product = @profile.products.find(params[:id])
100 114 @input = @product.inputs.build
... ...
app/helpers/manage_products_helper.rb
... ... @@ -75,9 +75,12 @@ module ManageProductsHelper
75 75 end
76 76  
77 77 def categories_container(categories_selection_html, hierarchy_html = '')
78   - hidden_field_tag('selected_category_id') +
79   - content_tag('div', hierarchy_html, :id => 'hierarchy_navigation') +
80   - content_tag('div', categories_selection_html, :id => 'categories_container_wrapper')
  78 + content_tag 'div',
  79 + render('categories_autocomplete') +
  80 + hidden_field_tag('selected_category_id') +
  81 + content_tag('div', hierarchy_html, :id => 'hierarchy_navigation') +
  82 + content_tag('div', categories_selection_html, :id => 'categories_container_wrapper'),
  83 + :id => 'categories-container'
81 84 end
82 85  
83 86 def select_for_categories(categories, level = 0)
... ...
app/views/manage_products/_categories_autocomplete.html.erb 0 → 100644
... ... @@ -0,0 +1,8 @@
  1 +<%= text_field_tag 'product_category_id', '', :placeholder => _('type a category for the product') %>
  2 +
  3 +<%= javascript_include_tag '/javascripts/product_categories.js' %>
  4 +<% javascript_tag do %>
  5 + product_categories.autocomplete.search_url = <%= url_for(:controller => :manage_products, :action => :search_categories).to_json %>
  6 + product_categories.autocomplete.select_url = <%= url_for(:controller => :manage_products, :action => :show_category_tree).to_json %>
  7 + product_categories.autocomplete.load('#product_category_id')
  8 +<% end %>
... ...
app/views/manage_products/_selected_category_tree.html.erb 0 → 100644
... ... @@ -0,0 +1,2 @@
  1 +<%= categories_container selects_for_all_ancestors(@category), hierarchy_category_navigation(@category, :make_links => true) %>
  2 +
... ...
app/views/manage_products/edit_category.html.erb
... ... @@ -16,7 +16,7 @@
16 16  
17 17 <h3><%= _('Edit category of this product:') %></h3>
18 18  
19   - <%= categories_container(selects_for_all_ancestors(@category), hierarchy_category_navigation(@category, :make_links => true)) %>
  19 + <%= render 'manage_products/selected_category_tree' %>
20 20  
21 21 <div id='categories_selection_actionbar'>
22 22 <%= button(:back, _('Back to product'), :action => 'show', :id => @product) %>
... ...
public/designs/themes/base/style.css
... ... @@ -1401,3 +1401,17 @@ table.profile th {
1401 1401 table#recaptcha_table tr:hover td {
1402 1402 background-color: #fff;
1403 1403 }
  1404 +
  1405 +/* product cateogories */
  1406 +#categories-container #product_category_id {
  1407 + font-size: 18px;
  1408 + width: 100%;
  1409 + margin-bottom: 8px;
  1410 +}
  1411 +#categories-container #product_category_id:focus {
  1412 + outline: none;
  1413 + border-color: green;
  1414 + box-shadow: 0 0 10px green;
  1415 + color:#333;
  1416 +}
  1417 +
... ...
public/javascripts/product_categories.js 0 → 100644
... ... @@ -0,0 +1,40 @@
  1 +product_categories = {
  2 +
  3 + autocomplete: {
  4 + search_url: '',
  5 + select_url: '',
  6 +
  7 + load: function(elem) {
  8 + elem = jQuery(elem)
  9 +
  10 + elem.autocomplete({
  11 + minLength: 3,
  12 + selectFirst: true,
  13 +
  14 + //define callback to retrieve results
  15 + source: function(req, add) {
  16 + //pass request to server
  17 + //The alt attribute contains the wordpress callback action
  18 + var params = { term: req.term };
  19 + jQuery.getJSON(product_categories.autocomplete.search_url, params, function(data) {
  20 + add(data);
  21 + });
  22 + },
  23 +
  24 + focus: function( event, ui ) {
  25 + jQuery(this).val(ui.item.label);
  26 + return false;
  27 + },
  28 +
  29 + select: function(e, ui) {
  30 + jQuery('#categories-container').load(product_categories.autocomplete.select_url, {category_id: ui.item.value})
  31 +
  32 + jQuery(this).val("")
  33 + },
  34 +
  35 + });
  36 +
  37 + },
  38 + },
  39 +
  40 +};
... ...