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 + +

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 + +

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);