From a54bd85154d679b888c0aedb3cc577fb8dd55ec9 Mon Sep 17 00:00:00 2001 From: boussou Date: Mon, 24 Feb 2014 20:36:08 +0100 Subject: [PATCH 1/4] JSON response & multiple input fields handling ADDED JSON response & multiple input fields handling & processing through jquery tmpl (http://ejohn.org/blog/javascript-micro-templating/ & one of its forks like https://github.com/BorisMoore/jquery-tmpl) --- searchbox.js | 53 +++++++++++++++++++++++++++++++++++++++++++++++++--- 1 file changed, 50 insertions(+), 3 deletions(-) diff --git a/searchbox.js b/searchbox.js index 0b355f8..ea175a2 100644 --- a/searchbox.js +++ b/searchbox.js @@ -1,6 +1,33 @@ // Author: Ryan Heath // http://rpheath.com +/** +ADDED JSON response handling & multiple input fields handling & processing through jquery tmpl (http://ejohn.org/blog/javascript-micro-templating/ & one of its forks like https://github.com/BorisMoore/jquery-tmpl) + +changes: data & tmpl +- data : jquery selector for collecting data to submit +- tmpl : if you use the john resig tmpl, & the server returns back JSON, then it is evaluated for every row +now you can call it like this: + +$('input.search').searchbox({ + url: your_url, + param: 'q', + dom_id: '#resultTable', + delay: 250, + data: 'input.search', + tmpl: ' ${brand} ${model} ' +}) + + +if you have inputs like this: + + +then you will receive in the GET request values as: brand=value&model=value +for all the input that are defined by the 'data' parameter +so you can have multiple fields & still use a live search form + +*/ + (function($) { $.searchbox = {} @@ -10,7 +37,9 @@ param: 'query', dom_id: '#results', delay: 100, - loading_css: '#loading' + loading_css: '#loading', + data: null, + tmpl: null }, loading: function() { @@ -31,10 +60,28 @@ base = path[0], params = path[1], query_string = query if (params) query_string = [params.replace('&', '&'), query].join('&') - + + alldata={}; + if ($.tmpl && $.searchbox.settings.data) + $( $.searchbox.settings.data ).each( function(id,ctrl) { alldata[ ctrl.id ]=ctrl.value; } ); + + if ($.tmpl && $.searchbox.settings.tmpl) + $.ajax({ + dataType: "json", + data: alldata, + url: [base, '?', query_string].join(''), + success: function(data) { + $($.searchbox.settings.dom_id).html( $.tmpl($.searchbox.settings.tmpl, data) ); + } + }) + else + $.get([base, '?', query_string].join(''), function(data) { $($.searchbox.settings.dom_id).html(data) }) + + + }, start: function() { @@ -74,4 +121,4 @@ }) }) } -})(jQuery); \ No newline at end of file +})(jQuery); From c86833a29568ef09e177cd40c9cc65e1aa89f65a Mon Sep 17 00:00:00 2001 From: boussou Date: Mon, 24 Feb 2014 20:42:01 +0100 Subject: [PATCH 2/4] Update README.textile --- README.textile | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/README.textile b/README.textile index 98c3ee6..c80aa4d 100644 --- a/README.textile +++ b/README.textile @@ -1,6 +1,33 @@ h1. Searchbox This is a jQuery plugin that turns any textbox into a live search, or a "searchbox". +For previous documentation, see below + +

ADDED JSON response handling & multiple input fields handling & processing through jquery tmpl

+(http://ejohn.org/blog/javascript-micro-templating/ & one of its forks like https://github.com/BorisMoore/jquery-tmpl) + +changes: data & tmpl +- data : jquery selector for collecting data to submit +- tmpl : if you use the john resig tmpl, & the server returns back JSON, then it is evaluated for every row +now you can call it like this: +
+$('input.search').searchbox({
+  url: your_url,
+  param: 'q',
+  dom_id: '#resultTable',
+  delay: 250,
+  data: 'input.search',
+  tmpl: ' ${brand}     ${model}   '
+})
+
+ +if you have inputs like this: +
    
+
+then you will receive on the server a GET request with values as: brand=value&model=value +all of the inputs that have a class as defined by the 'data' parameter will be included. + +so you can have multiple fields & still use a live search form h3. Usage @@ -38,4 +65,4 @@ Here's an example of how to make use of them: h3. License -(c) 2009 Ryan Heath, released under the MIT license \ No newline at end of file +(c) 2009 Ryan Heath, released under the MIT license From 3d50ffdcf1ef50f8f87c09fca4f4d49502897e5c Mon Sep 17 00:00:00 2001 From: boussou Date: Mon, 24 Feb 2014 21:29:40 +0100 Subject: [PATCH 3/4] To allow search to be triggered --- README.textile | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/README.textile b/README.textile index c80aa4d..e887592 100644 --- a/README.textile +++ b/README.textile @@ -29,6 +29,11 @@ all of the inputs that have a class as defined by the 'data' parameter will be i so you can have multiple fields & still use a live search form +

To allow search to be triggered

+ You can do it using +$.searchbox.process(); + + h3. Usage 
$('input.search').searchbox()
From 2c87b29f2d2484daba2b93d144bcdbcbc46a68df Mon Sep 17 00:00:00 2001 From: boussou Date: Sun, 2 Mar 2014 12:48:08 +0100 Subject: [PATCH 4/4] Update searchbox.js Added updates from others forks. - Test for empty inputs - fires requests only after x characters. --- searchbox.js | 26 ++++++++++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/searchbox.js b/searchbox.js index ea175a2..8849240 100644 --- a/searchbox.js +++ b/searchbox.js @@ -3,6 +3,7 @@ /** ADDED JSON response handling & multiple input fields handling & processing through jquery tmpl (http://ejohn.org/blog/javascript-micro-templating/ & one of its forks like https://github.com/BorisMoore/jquery-tmpl) +Added updates from others forks. changes: data & tmpl - data : jquery selector for collecting data to submit @@ -36,10 +37,12 @@ so you can have multiple fields & still use a live search form url: '/search', param: 'query', dom_id: '#results', + total_dom_id: '#total', delay: 100, loading_css: '#loading', data: null, - tmpl: null + tmpl: null, + characters: 3 }, loading: function() { @@ -55,6 +58,14 @@ so you can have multiple fields & still use a live search form }, process: function(terms) { + + //Added a check for 'blank', so search is not triggered on empty string… + if(terms) + { + var blank_check = terms.replace(/\s/g, ''); + if(blank_check == ''){return false;} + } + var path = $.searchbox.settings.url.split('?'), query = [$.searchbox.settings.param, '=', terms].join(''), base = path[0], params = path[1], query_string = query @@ -71,6 +82,11 @@ so you can have multiple fields & still use a live search form data: alldata, url: [base, '?', query_string].join(''), success: function(data) { + records_info=data.pop(); +// records_info.total +// records_info.offset +// records_info.size + $($.searchbox.settings.total_dom_id).html( records_info.total ); $($.searchbox.settings.dom_id).html( $.tmpl($.searchbox.settings.tmpl, data) ); } }) @@ -109,7 +125,13 @@ so you can have multiple fields & still use a live search form .ajaxStart(function() { $.searchbox.start() }) .ajaxStop(function() { $.searchbox.stop() }) .keyup(function() { - if ($input.val() != this.previousValue) { + + if ($input.val() != this.previousValue && + //starts when x characters typed + ($input.val().length >= $.searchbox.settings.characters + //except if character removed + || this.previousValue==null || this.previousValue.length>$input.val().length) + ) { $.searchbox.resetTimer(this.timer) this.timer = setTimeout(function() {