Commit c6b33ac32faa9d8ebeef1b48467afa409dfc2bae
1 parent
5293de94
Exists in
master
and in
29 other branches
[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
... | ... | @@ -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 | ... | ... |
... | ... | @@ -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