Download as
Browse Code »

Commit c6b33ac32faa9d8ebeef1b48467afa409dfc2bae

Authored by Rodrigo Souto
1 parent 5293de94
Exists in master and in 22 other branches angular_poc, api-article-archived, article-readonly, backup-7-jan-2016, captcha_serpro_plugin, content-manager-hostspot, export-comment-paragraph, fix_event_date_issue, login-captcha, master_rails3, new_video_plugin, pg_search_rank, production, refactor_with_role, refactor_with_role_scope, remove_profile_cat_icons, resend_confirmation_email, staging, staging_rails3, tasks_keep_filter_params, theme-brasil-digital-from-staging, travis

[search-improvements] Add real-time search using typewatch jquery plugin

Showing 3 changed files with 110 additions and 1 deletions   Show diff stats
app/views/layouts/_javascript.html.erb
  Diff comments   View file @c6b33ac
... ... @@ -2,7 +2,7 @@
2 2 'jquery-2.1.1.min', 'jquery-migrate-1.2.1',
3 3 'jquery.noconflict.js', 'jquery.cycle.all.min.js', 'thickbox.js', 'lightbox', 'colorbox',
4 4 'jquery-ui-1.10.4/js/jquery-ui-1.10.4.min', 'jquery.scrollTo', 'jquery.form.js', 'jquery-validation/jquery.validate',
5   -'jquery.cookie', 'jquery.ba-bbq.min.js', 'reflection', 'jquery.tokeninput',
  5 +'jquery.cookie', 'jquery.ba-bbq.min.js', 'reflection', 'jquery.tokeninput', 'jquery.typewatch',
6 6 'add-and-join', 'report-abuse', 'catalog', 'manage-products', 'autogrow',
7 7 'jquery-timepicker-addon/dist/jquery-ui-timepicker-addon', 'application.js', 'rails.js', :cache => 'cache/application' %>
8 8  
... ...
public/javascripts/jquery.typewatch.js 0 → 100644
  Diff comments   View file @c6b33ac
... ... @@ -0,0 +1,102 @@
  1 +/*
  2 +* TypeWatch 2.2
  3 +*
  4 +* Examples/Docs: github.com/dennyferra/TypeWatch
  5 +*
  6 +* Copyright(c) 2013
  7 +* Denny Ferrassoli - dennyferra.com
  8 +* Charles Christolini
  9 +*
  10 +* Dual licensed under the MIT and GPL licenses:
  11 +* http://www.opensource.org/licenses/mit-license.php
  12 +* http://www.gnu.org/licenses/gpl.html
  13 +*/
  14 +
  15 +(function(jQuery) {
  16 + jQuery.fn.typeWatch = function(o) {
  17 + // The default input types that are supported
  18 + var _supportedInputTypes =
  19 + ['TEXT', 'TEXTAREA', 'PASSWORD', 'TEL', 'SEARCH', 'URL', 'EMAIL', 'DATETIME', 'DATE', 'MONTH', 'WEEK', 'TIME', 'DATETIME-LOCAL', 'NUMBER', 'RANGE'];
  20 +
  21 + // Options
  22 + var options = jQuery.extend({
  23 + wait: 750,
  24 + callback: function() { },
  25 + highlight: true,
  26 + captureLength: 2,
  27 + inputTypes: _supportedInputTypes
  28 + }, o);
  29 +
  30 + function checkElement(timer, override) {
  31 + var value = jQuery(timer.el).val();
  32 +
  33 + // Fire if text >= options.captureLength AND text != saved text OR if override AND text >= options.captureLength
  34 + if ((value.length >= options.captureLength && value.toUpperCase() != timer.text)
  35 + || (override && value.length >= options.captureLength))
  36 + {
  37 + timer.text = value.toUpperCase();
  38 + timer.cb.call(timer.el, value);
  39 + }
  40 + };
  41 +
  42 + function watchElement(elem) {
  43 + console.log('Watch element: '+ elem)
  44 + var elementType = elem.type.toUpperCase();
  45 + if (jQuery.inArray(elementType, options.inputTypes) >= 0) {
  46 +
  47 + // Allocate timer element
  48 + var timer = {
  49 + timer: null,
  50 + text: jQuery(elem).val().toUpperCase(),
  51 + cb: options.callback,
  52 + el: elem,
  53 + wait: options.wait
  54 + };
  55 +
  56 + // Set focus action (highlight)
  57 + if (options.highlight) {
  58 + jQuery(elem).focus(
  59 + function() {
  60 + this.select();
  61 + });
  62 + }
  63 +
  64 + // Key watcher / clear and reset the timer
  65 + var startWatch = function(evt) {
  66 + console.log('Starting watch on: ' + evt)
  67 + var timerWait = timer.wait;
  68 + var overrideBool = false;
  69 + var evtElementType = this.type.toUpperCase();
  70 +
  71 + // If enter key is pressed and not a TEXTAREA and matched inputTypes
  72 + if (typeof evt.keyCode != 'undefined' && evt.keyCode == 13 && evtElementType != 'TEXTAREA' && jQuery.inArray(evtElementType, options.inputTypes) >= 0) {
  73 + timerWait = 1;
  74 + overrideBool = true;
  75 + }
  76 +
  77 + var timerCallbackFx = function() {
  78 + checkElement(timer, overrideBool)
  79 + }
  80 +
  81 + // Clear timer
  82 + clearTimeout(timer.timer);
  83 + timer.timer = setTimeout(timerCallbackFx, timerWait);
  84 + };
  85 +
  86 + //FIXME Monkey patch to fix the on with multiple actions
  87 + //jQuery(elem).on('keydown paste cut input', startWatch);
  88 + jQuery(elem).keydown(startWatch);
  89 + jQuery(elem).paste(startWatch);
  90 + jQuery(elem).cut(startWatch);
  91 + jQuery(elem).input(startWatch);
  92 + }
  93 + };
  94 +
  95 + // Watch Each Element
  96 + return this.each(function() {
  97 + console.log('Watching: '+ this);
  98 + watchElement(this);
  99 + });
  100 +
  101 + };
  102 +})(jQuery);
... ...
public/javascripts/search.js
  Diff comments   View file @c6b33ac
... ... @@ -19,4 +19,11 @@
19 19 })
20 20 return false;
21 21 });
  22 +
  23 + $("input#search-input").typeWatch({
  24 + callback: function (value) {$('form.search_form').submit()},
  25 + wait: 750,
  26 + highlight: true,
  27 + captureLength: 2
  28 + });
22 29 })(jQuery);
... ...