/* Plugin: searchFilter v1.2.9 * Author: Kasey Speakman (kasey@cornerspeed.com) * License: Dual Licensed, MIT and GPL v2 (http://www.gnu.org/licenses/gpl-2.0.html) * * REQUIREMENTS: * jQuery 1.3+ (http://jquery.com/) * A Themeroller Theme (http://jqueryui.com/themeroller/) * * SECURITY WARNING * You should always implement server-side checking to ensure that * the query will fail when forged/invalid data is received. * Clever users can send any value they want through JavaScript and HTTP POST/GET. * * THEMES * Simply include the CSS file for your Themeroller theme. * * DESCRIPTION * This plugin creates a new searchFilter object in the specified container * * INPUT TYPE * fields: an array of field objects. each object has the following properties: * text: a string containing the display name of the field (e.g. "Field 1") * itemval: a string containing the actual field name (e.g. "field1") * optional properties: * ops: an array of operators in the same format as jQuery.fn.searchFilter.defaults.operators * that is: [ { op: 'gt', text: 'greater than'}, { op:'lt', text: 'less than'}, ... ] * if not specified, the passed-in options used, and failting that, jQuery.fn.searchFilter.defaults.operators will be used * *** NOTE *** * Specifying a dataUrl or dataValues property means that a where the user would normally type in their search data * ************ * dataUrl: a url that will return the html select for this field, this url will only be called once for this field * dataValues: the possible values for this field in the form [ { text: 'Data Display Text', value: 'data_actual_value' }, { ... } ] * dataInit: a function that you can use to initialize the data field. this function is passed the jQuery-fied data element * dataEvents: list of events to apply to the data element. uses $("#id").bind(type, [data], fn) to bind events to data element * *** JSON of this object could look like this: *** * var fields = [ * { * text: 'Field Display Name', * itemval: 'field_actual_name', * // below this are optional values * ops: [ // this format is the same as jQuery.fn.searchFilter.defaults.operators * { op: 'gt', text: 'greater than' }, * { op: 'lt', text: 'less than' } * ], * dataUrl: 'http://server/path/script.php?propName=propValue', // using this creates a select for the data input instead of an input type='text' * dataValues: [ // using this creates a select for the data input instead of an input type='text' * { text: 'Data Value Display Name', value: 'data_actual_value' }, * { ... } * ], * dataInit: function(jElem) { jElem.datepicker(options); }, * dataEvents: [ // these are the same options that you pass to $("#id").bind(type, [data], fn) * { type: 'click', data: { i: 7 }, fn: function(e) { console.log(e.data.i); } }, * { type: 'keypress', fn: function(e) { console.log('keypress'); } } * ] * }, * { ... } * ] * options: name:value properties containing various creation options * see jQuery.fn.searchFilter.defaults for the overridable options * * RETURN TYPE: This plugin returns a SearchFilter object, which has additional SearchFilter methods: * Methods * add: Adds a filter. added to the end of the list unless a jQuery event object or valid row number is passed. * del: Removes a filter. removed from the end of the list unless a jQuery event object or valid row number is passed. * reset: resets filters back to original state (only one blank filter), and calls onReset * search: puts the search rules into an object and calls onSearch with it * close: calls the onClose event handler * * USAGE * HTML * * ... * * * * * ... * * * ... *
* ... * * JQUERY * Methods * initializing: $("#mySearch").searchFilter([{text: "Field 1", value: "field1"},{text: "Field 2", value: "field2"}], {onSearch: myFilterRuleReceiverFn, onReset: myFilterResetFn }); * Manual Methods (there's no need to call these methods unless you are trying to manipulate searchFilter with script) * add: $("#mySearch").searchFilter().add(); // appends a blank filter * $("#mySearch").searchFilter().add(0); // copies the first filter as second * del: $("#mySearch").searchFilter().del(); // removes the bottom filter * $("#mySearch").searchFilter().del(1); // removes the second filter * search: $("#mySearch").searchFilter().search(); // invokes onSearch, passing it a ruleGroup object * reset: $("#mySearch").searchFilter().reset(); // resets rules and invokes onReset * close: $("#mySearch").searchFilter().close(); // without an onClose handler, equivalent to $("#mySearch").hide(); * * NOTE: You can get the jQuery object back from the SearchFilter object by chaining .$ * Example * $("#mySearch").searchFilter().add().add().reset().$.hide(); * Verbose Example * $("#mySearch") // gets jQuery object for the HTML element with id="mySearch" * .searchFilter() // gets the SearchFilter object for an existing search filter * .add() // adds a new filter to the end of the list * .add() // adds another new filter to the end of the list * .reset() // resets filters back to original state, triggers onReset * .$ // returns jQuery object for $("#mySearch") * .hide(); // equivalent to $("#mySearch").hide(); */ jQuery.fn.searchFilter = function(fields, options) { function SearchFilter(jQ, fields, options) { //--------------------------------------------------------------- // PUBLIC VARS //--------------------------------------------------------------- this.$ = jQ; // makes the jQuery object available as .$ from the return value //--------------------------------------------------------------- // PUBLIC FUNCTIONS //--------------------------------------------------------------- this.add = function(i) { if (i == null) jQ.find(".ui-add-last").click(); else jQ.find(".sf:eq(" + i + ") .ui-add").click(); return this; }; this.del = function(i) { if (i == null) jQ.find(".sf:last .ui-del").click(); else jQ.find(".sf:eq(" + i + ") .ui-del").click(); return this; }; this.search = function(e) { jQ.find(".ui-search").click(); return this; }; this.reset = function(o) { if(o===undefined) o = false; jQ.find(".ui-reset").trigger('click',[o]); return this; }; this.close = function() { jQ.find(".ui-closer").click(); return this; }; //--------------------------------------------------------------- // "CONSTRUCTOR" (in air quotes) //--------------------------------------------------------------- if (fields != null) { // type coercion matches undefined as well as null //--------------------------------------------------------------- // UTILITY FUNCTIONS //--------------------------------------------------------------- function hover() { jQuery(this).toggleClass("ui-state-hover"); return false; } function active(e) { jQuery(this).toggleClass("ui-state-active", (e.type == "mousedown")); return false; } function buildOpt(value, text) { return ""; } function buildSel(className, options, isHidden) { return ""; } function initData(selector, fn) { var jElem = jQ.find("tr.sf td.data " + selector); if (jElem[0] != null) fn(jElem); } function bindDataEvents(selector, events) { var jElem = jQ.find("tr.sf td.data " + selector); if (jElem[0] != null) { jQuery.each(events, function() { if (this.data != null) jElem.bind(this.type, this.data, this.fn); else jElem.bind(this.type, this.fn); }); } } //--------------------------------------------------------------- // SUPER IMPORTANT PRIVATE VARS //--------------------------------------------------------------- // copies jQuery.fn.searchFilter.defaults.options properties onto an empty object, then options onto that var opts = jQuery.extend({}, jQuery.fn.searchFilter.defaults, options); // this is keeps track of the last asynchronous setup var highest_late_setup = -1; //--------------------------------------------------------------- // CREATION PROCESS STARTS //--------------------------------------------------------------- // generate the global ops var gOps_html = ""; jQuery.each(opts.groupOps, function() { gOps_html += buildOpt(this.op, this.text); }); gOps_html = ""; /* original content - doesn't minify very well jQ .html("") // clear any old content .addClass("ui-searchFilter") // add classes .append( // add content "\
 
\ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \ \
\
\ \
\ " + opts.windowTitle + "\
 
\ " + opts.resetText + "\ " + opts.searchText + "\ " + opts.matchText + " \ " + gOps_html + " \ " + opts.rulesText + "\  
\ "); /* end hard-to-minify code */ /* begin easier to minify code */ jQ.html("").addClass("ui-searchFilter").append("
 
" + opts.windowTitle + "

" + opts.resetText + "" + opts.searchText + "" + opts.matchText + " " + gOps_html + " " + opts.rulesText + " 
"); /* end easier-to-minify code */ var jRow = jQ.find("tr.sf"); var jFields = jRow.find("td.fields"); var jOps = jRow.find("td.ops"); var jData = jRow.find("td.data"); // generate the defaults var default_ops_html = ""; jQuery.each(opts.operators, function() { default_ops_html += buildOpt(this.op, this.text); }); default_ops_html = buildSel("default", default_ops_html, true); jOps.append(default_ops_html); var default_data_html = ""; jData.append(default_data_html); // generate the field list as a string var fields_html = ""; var has_custom_ops = false; var has_custom_data = false; jQuery.each(fields, function(i) { var field_num = i; fields_html += buildOpt(this.itemval, this.text); // add custom ops if they exist if (this.ops != null) { has_custom_ops = true; var custom_ops = ""; jQuery.each(this.ops, function() { custom_ops += buildOpt(this.op, this.text); }); custom_ops = buildSel("field" + field_num, custom_ops, true); jOps.append(custom_ops); } // add custom data if it is given if (this.dataUrl != null) { if (i > highest_late_setup) highest_late_setup = i; has_custom_data = true; var dEvents = this.dataEvents; var iEvent = this.dataInit; var bs = this.buildSelect; jQuery.ajax(jQuery.extend({ url : this.dataUrl, complete: function(data) { var $d; if(bs != null) $d =jQuery("
").append(bs(data)); else $d = jQuery("
").append(data.responseText); $d.find("select").addClass("field" + field_num).hide(); jData.append($d.html()); if (iEvent) initData(".field" + i, iEvent); if (dEvents) bindDataEvents(".field" + i, dEvents); if (i == highest_late_setup) { // change should get called no more than twice when this searchFilter is constructed jQ.find("tr.sf td.fields select[name='field']").change(); } } },opts.ajaxSelectOptions)); } else if (this.dataValues != null) { has_custom_data = true; var custom_data = ""; jQuery.each(this.dataValues, function() { custom_data += buildOpt(this.value, this.text); }); custom_data = buildSel("field" + field_num, custom_data, true); jData.append(custom_data); } else if (this.dataEvents != null || this.dataInit != null) { has_custom_data = true; var custom_data = ""; jData.append(custom_data); } // attach events to data if they exist if (this.dataInit != null && i != highest_late_setup) initData(".field" + i, this.dataInit); if (this.dataEvents != null && i != highest_late_setup) bindDataEvents(".field" + i, this.dataEvents); }); fields_html = ""; jFields.append(fields_html); // setup the field select with an on-change event if there are custom ops or data var jFSelect = jFields.find("select[name='field']"); if (has_custom_ops) jFSelect.change(function(e) { var index = e.target.selectedIndex; var td = jQuery(e.target).parents("tr.sf").find("td.ops"); td.find("select").removeAttr("name").hide(); // disown and hide all elements var jElem = td.find(".field" + index); if (jElem[0] == null) jElem = td.find(".default"); // if there's not an element for that field, use the default one jElem.attr("name", "op").show(); return false; }); else jOps.find(".default").attr("name", "op").show(); if (has_custom_data) jFSelect.change(function(e) { var index = e.target.selectedIndex; var td = jQuery(e.target).parents("tr.sf").find("td.data"); td.find("select,input").removeClass("vdata").hide(); // disown and hide all elements var jElem = td.find(".field" + index); if (jElem[0] == null) jElem = td.find(".default"); // if there's not an element for that field, use the default one jElem.show().addClass("vdata"); return false; }); else jData.find(".default").show().addClass("vdata"); // go ahead and call the change event and setup the ops and data values if (has_custom_ops || has_custom_data) jFSelect.change(); // bind events jQ.find(".ui-state-default").hover(hover, hover).mousedown(active).mouseup(active); // add hover/active effects to all buttons jQ.find(".ui-closer").click(function(e) { opts.onClose(jQuery(jQ.selector)); return false; }); jQ.find(".ui-del").click(function(e) { var row = jQuery(e.target).parents(".sf"); if (row.siblings(".sf").length > 0) { // doesn't remove if there's only one filter left if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined) row.find(".hasDatepicker").datepicker("destroy"); // clean up datepicker's $.data mess row.remove(); // also unbinds } else { // resets the filter if it's the last one row.find("select[name='field']")[0].selectedIndex = 0; row.find("select[name='op']")[0].selectedIndex = 0; row.find(".data input").val(""); // blank all input values row.find(".data select").each(function() { this.selectedIndex = 0; }); // select first option on all selects row.find("select[name='field']").change(function(event){event.stopPropagation();}); // trigger any change events } return false; }); jQ.find(".ui-add").click(function(e) { var row = jQuery(e.target).parents(".sf"); var newRow = row.clone(true).insertAfter(row); newRow.find(".ui-state-default").removeClass("ui-state-hover ui-state-active"); if (opts.clone) { newRow.find("select[name='field']")[0].selectedIndex = row.find("select[name='field']")[0].selectedIndex; var stupid_browser = (newRow.find("select[name='op']")[0] == null); // true for IE6 if (!stupid_browser) newRow.find("select[name='op']").focus()[0].selectedIndex = row.find("select[name='op']")[0].selectedIndex; var jElem = newRow.find("select.vdata"); if (jElem[0] != null) // select doesn't copy it's selected index when cloned jElem[0].selectedIndex = row.find("select.vdata")[0].selectedIndex; } else { newRow.find(".data input").val(""); // blank all input values newRow.find("select[name='field']").focus(); } if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined) { // using $.data to associate data with document elements is Not Good row.find(".hasDatepicker").each(function() { var settings = jQuery.data(this, "datepicker").settings; newRow.find("#" + this.id).unbind().removeAttr("id").removeClass("hasDatepicker").datepicker(settings); }); } newRow.find("select[name='field']").change(function(event){event.stopPropagation();} ); return false; }); jQ.find(".ui-search").click(function(e) { var ui = jQuery(jQ.selector); // pointer to search box wrapper element var ruleGroup; var group_op = ui.find("select[name='groupOp'] :selected").val(); // puls "AND" or "OR" if (!opts.stringResult) { ruleGroup = { groupOp: group_op, rules: [] }; } else { ruleGroup = "{\"groupOp\":\"" + group_op + "\",\"rules\":["; } ui.find(".sf").each(function(i) { var tField = jQuery(this).find("select[name='field'] :selected").val(); var tOp = jQuery(this).find("select[name='op'] :selected").val(); var tData = jQuery(this).find("input.vdata,select.vdata :selected").val(); tData += ""; if (!opts.stringResult) { ruleGroup.rules.push({ field: tField, op: tOp, data: tData }); } else { tData = tData.replace(/\\/g,'\\\\').replace(/\"/g,'\\"'); if (i > 0) ruleGroup += ","; ruleGroup += "{\"field\":\"" + tField + "\","; ruleGroup += "\"op\":\"" + tOp + "\","; ruleGroup += "\"data\":\"" + tData + "\"}"; } }); if (opts.stringResult) ruleGroup += "]}"; opts.onSearch(ruleGroup); return false; }); jQ.find(".ui-reset").click(function(e,op) { var ui = jQuery(jQ.selector); ui.find(".ui-del").click(); // removes all filters, resets the last one ui.find("select[name='groupOp']")[0].selectedIndex = 0; // changes the op back to the default one opts.onReset(op); return false; }); jQ.find(".ui-add-last").click(function() { var row = jQuery(jQ.selector + " .sf:last"); var newRow = row.clone(true).insertAfter(row); newRow.find(".ui-state-default").removeClass("ui-state-hover ui-state-active"); newRow.find(".data input").val(""); // blank all input values newRow.find("select[name='field']").focus(); if (opts.datepickerFix === true && jQuery.fn.datepicker !== undefined) { // using $.data to associate data with document elements is Not Good row.find(".hasDatepicker").each(function() { var settings = jQuery.data(this, "datepicker").settings; newRow.find("#" + this.id).unbind().removeAttr("id").removeClass("hasDatepicker").datepicker(settings); }); } newRow.find("select[name='field']").change(function(event){event.stopPropagation();}); return false; }); this.setGroupOp = function(setting) { /* a "setter" for groupping argument. * ("AND" or "OR") * * Inputs: * setting - a string * * Returns: * Does not return anything. May add success / failure reporting in future versions. * * author: Daniel Dotsenko (dotsa@hotmail.com) */ selDOMobj = jQ.find("select[name='groupOp']")[0]; var indexmap = {}, l = selDOMobj.options.length, i; for (i=0; i select[class='field"+i+"']")[0]; if (selDOMobj) { for (j=0, lj=selDOMobj.options.length; j select[class='field"+i+"']")[0]; if (selDOMobj) { valueindexmap[fields[i]]['data'] = {}; // this setting is the flag that 'data' is contained in a SELECT for (j=0, lj=selDOMobj.options.length; j