HTML Table Filter Generator

This demos shows how to create a new control based on the table filter script: the auto-suggest drop-down grid.

	//TF config object configuring table filter and drop-down 
	var tblConfig = {
		public_methods: true,
		single_search_filter: true,
		external_flt_grid: true,
		external_flt_grid_ids: ['ddFilter'],
		on_keyup: true,
		on_keyup_delay: 500,
		highlight_keywords: true,
		highlight_css_class: 'highlight',
		enable_default_theme: true,
		
		/* Drop-down properties and methods */
		drop_down_filter_container: 'dropDownFilter',
		drop_down_grid_container: 'dropDownGrid',
		drop_down_filter: 'ddFilter',
		drop_down_clear_button_container: 'ddButtonClear',
		drop_down_clear_button_html: '',
		drop_down_button_container: 'ddButton',
		drop_down_button_html: '',
		drop_down_autoselect_unique_result: true,
		drop_down_value_index: 1, //column index from which value is retrieved
		drop_down_selected_row_css_class: 'ddSelRow',
		drop_down_hover_row_css_class: 'ddSelRow',
		//This event is fired when a row is selected 
		on_drop_down_selected_value: function(o, row, value){
			//Your logic here
			tf_Id('spnMsg').innerHTML = 'You have selected ' + value + ', row index: ' + row.rowIndex;
		},
		//This event is fired when filter is cleared
		on_drop_down_cleared_value: function(o){
			//Your logic here
			tf_Id('spnMsg').innerHTML = '';
		},
		
		/* Grid container visibility methods */
		toggleDropDownGrid: function(o){
			if(o.ddGridContainer.style.display != 'none')
				o.fObj.displayDropDownGrid(o, 'none');
			else
				o.fObj.displayDropDownGrid(o, '');
		},
		
		displayDropDownGrid: function(o, show){
			o.ddGridContainer.style.display = show;
		},
		
		//Selected row element
		ddSelRow: null,
		
		/* Sets events for each row */
		applyRowEvents: function(o){
			//Only for IE			
			function getRow(e){
				var row, target = (e && e.target) || (event && event.srcElement);
				while(target.parentNode){
					if(target.nodeName.tf_UCase() == 'TR'){
						row = target; break;
					}
					target = target.parentNode;
				}
				return row;
			}
			
			for(var i=o.GetStartRowIndex(); i<=o.GetLastRowIndex(); i++)
			{
				var row = o.tbl.rows[i];
				tf_AddEvent(row, 'click', function(e){
					if(o.fObj.ddSelRow) tf_RemoveClass(o.fObj.ddSelRow, o.ddSelRowClass); 
					var r = (!this.nodeType ? getRow(e) : this);
					var valueCell = r.cells[o.ddValueIndex];
					var val = tf_GetNodeText(valueCell);
					o.SetFilterValue(0, val);
					tf_AddClass(r, o.ddSelRowClass);
					o.fObj.ddSelRow = r;
					o.fObj.toggleDropDownGrid(o);
					if(o.onDropDownSelVal) o.onDropDownSelVal.call(null, o, r, val);
				});
				
				tf_AddEvent(row, 'mouseover', function(e){
					var row = (!this.nodeType ? getRow(e) : this);
					if(row != o.fObj.ddSelRow) tf_AddClass(row, o.ddHoverRowClass);
				});
				
				tf_AddEvent(row, 'mouseout', function(e){
					var row = (!this.nodeType ? getRow(e) : this);
					if(row != o.fObj.ddSelRow) tf_RemoveClass(row, o.ddHoverRowClass);
				});
			}
		},
		
		//This event is fired when filter is generated
		on_filters_loaded: function(o){ 
						
			//Insert drop-down buttons
			o.ddBtnClear = tf_Id(o.fObj.drop_down_clear_button_container);
			o.ddBtnClear.innerHTML = o.fObj.drop_down_clear_button_html;
			tf_AddEvent(o.ddBtnClear, 'click', function(){ o.SetFilterValue(0,''); o._Filter(); o.GetFilterElement(0).focus(); });			
			o.ddBtn = tf_Id(o.fObj.drop_down_button_container);
			o.ddBtn.innerHTML = o.fObj.drop_down_button_html;
			tf_AddEvent(o.ddBtn, 'click', function(){ o.fObj.toggleDropDownGrid(o); });
			
			//Reference drop-down elements, properties, callbacks
			o.ddGridContainer = tf_Id(o.fObj.drop_down_grid_container);
			o.ddValueIndex = o.fObj.drop_down_value_index;
			o.ddAutoSelectUniqueResult = o.fObj.drop_down_autoselect_unique_result;
			o.ddSelRowClass = o.fObj.drop_down_selected_row_css_class;
			o.ddHoverRowClass = o.fObj.drop_down_hover_row_css_class;
			o.onDropDownSelVal = o.fObj.on_drop_down_selected_value;
			o.onDropDownClearVal = o.fObj.on_drop_down_cleared_value;
			
			//Applies event(s) on each row
			o.fObj.applyRowEvents(o);
			
			//In case grid container is not hidden at load
			if(o.ddGridContainer.style.display != 'none')
				o.fObj.displayDropDownGrid(o, 'none');
		},
		
		//This event is fired just before table is filtered
		on_before_filter: function(o){
			o.fObj.displayDropDownGrid(o, '');
			if(o.ddAutoSelectUniqueResult) clearTimeout(o.st);
			//Filter string is empty
			if(o.GetFilterValue(0) == ''){
				if(o.fObj.ddSelRow) tf_RemoveClass(o.fObj.ddSelRow, o.ddSelRowClass); 
				o.fObj.ddSelRow = null;
				if(o.onDropDownClearVal) o.onDropDownClearVal.call(null, o);
				//o.fObj.displayDropDownGrid(o, 'none');
			}
		},
		
		//This event is fired just after table is filtered
		on_after_filter: function(o){
			
			//When only 1 result value row is selected
			if(o.GetValidRowsIndex().length == 1){
				if(o.fObj.ddSelRow) tf_RemoveClass(o.fObj.ddSelRow, o.ddSelRowClass); 
				var row = o.tbl.rows[o.GetValidRowsIndex()];
				if(o.ddAutoSelectUniqueResult){
					var val = tf_GetNodeText(row.cells[o.ddValueIndex]);
					o.st = setTimeout( function(){ o.SetFilterValue(0, val); }, 50);
					if(o.onDropDownSelVal) o.onDropDownSelVal.call(null, o, row, val);
				}
				tf_AddClass(row, o.ddSelRowClass);
				o.fObj.ddSelRow = row;
				o.fObj.toggleDropDownGrid(o);
			} else {
				if(o.fObj.ddSelRow) tf_RemoveClass(o.fObj.ddSelRow, o.ddSelRowClass);
				o.fObj.ddSelRow = null;
				if(o.onDropDownClearVal) o.onDropDownClearVal.call(null, o);
			}
				
		}
	};