diff --git a/README.textile b/README.textile
index 98c3ee6..e887592 100644
--- a/README.textile
+++ b/README.textile
@@ -1,6 +1,38 @@
h1. Searchbox
This is a jQuery plugin that turns any textbox into a live search, or a "searchbox".
+For previous documentation, see below
+
+
+(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:
+
+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
+
+
To allow search to be triggered
+ You can do it using
+$.searchbox.process();
+
h3. Usage
@@ -38,4 +70,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
diff --git a/searchbox.js b/searchbox.js
index 0b355f8..8849240 100644
--- a/searchbox.js
+++ b/searchbox.js
@@ -1,6 +1,34 @@
// 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)
+Added updates from others forks.
+
+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 = {}
@@ -9,8 +37,12 @@
url: '/search',
param: 'query',
dom_id: '#results',
+ total_dom_id: '#total',
delay: 100,
- loading_css: '#loading'
+ loading_css: '#loading',
+ data: null,
+ tmpl: null,
+ characters: 3
},
loading: function() {
@@ -26,15 +58,46 @@
},
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
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) {
+ 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) );
+ }
+ })
+ else
+
$.get([base, '?', query_string].join(''), function(data) {
$($.searchbox.settings.dom_id).html(data)
})
+
+
+
},
start: function() {
@@ -62,7 +125,13 @@
.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() {
@@ -74,4 +143,4 @@
})
})
}
-})(jQuery);
\ No newline at end of file
+})(jQuery);