Just wanted a way of attaching a jQuery search plugin to an input element (or collection) and be able to pass specific options at invoke time:
This is the plugin code
(function($){
$.fn.extend({
enableSearch:function(opts,callback){
return this
.bind('focus',function(){
$(this.form.elements).val(''); // clears all search inputs
$(this).trigger('keyup'); // triggers the search on an empty input element
}) // END focus bind
.bind('keyup',function(){
var searchData = $.extend({},'source':this.form.id,'column':$(this).attr('id'),'value':$(this).val()},opts);
$.ajax({
url:opts.URL,
type:'post',
data:searchData,
dataType:'json'
})
.promise().then(function(returndata){
callback(returndata);
}); // END ajax call
return false;
}); // END bind keyup
} //END fn enableSearch
})
})(jQuery);
This is the call on the collection:
$('input') // collection on which to enable searching
.enableSearch({
URL:'<server side script url>',
extra_param:extra_param_value, // extra param which gets passed in the data to the server side fn
},function(data){
//actions performed on the returned data, e.g. update a list
});
I couldn't get my idea to work until I came across the jQuery promise implmentation. Opens many doors.
Works for me - any thoughts?