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

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
+
+<h3>ADDED JSON response handling & multiple input fields handling  & processing through jquery tmpl </h3>
+(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:
+<pre>
+$('input.search').searchbox({
+  url: your_url,
+  param: 'q',
+  dom_id: '#resultTable',
+  delay: 250,
+  data: 'input.search',
+  tmpl: '<tr> <td>${brand} </td>    <td>${model} </td>  </tr>'
+})
+</pre>
+
+if you have inputs like this:
+<pre>    <input type="text" id=brand class="form-control search">
+    <input type="text" id=model class="form-control search"></pre>
+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
+
+<h4>To allow search to be triggered</h4>
+ 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
+(c) 2009 Ryan Heath, released under the MIT license

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: '<tr> <td>${brand} </td>    <td>${model} </td>  </tr>'
+})
+
+
+if you have inputs like this:
+    <input type="text" id=brand class="form-control search">
+    <input type="text" id=model class="form-control search">
+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('&amp;', '&'), 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);
+})(jQuery);