Highlight searched text in datagrid cell [Solved]

[Darrel]

Hello team,

Is it possible to highlight the searched term in the doSearch function for a single search field on the grid?? For example, if I type 'ABCD' and if the data is present in the row object, then change the font color to red and background color to yellow of that matching cell.

The code is the same as the following link: https://www.jeasyui.com/forum/index.php?topic=5537.0

Code:

function doSearch(inp) {
	var rows = [];

	inp = inp.toUpperCase();

	var l_pageSize = $('#dg').datagrid('options').pageSize;

	if(!table_data.length || l_pageSize != g_pageSize)
	{
		getTableData();
	}

	$.map(table_data, function(row){
		for(var p in row)
		{
			var v = row[p];
			var regExp = new RegExp(inp, 'i'); // i - makes the search case-insensitive. 

			if(regExp.test(String(v))) 
			{
				//will I have to manipulate the rows here???
				rows.push(row);
				break;
			}
		}
	});

	if(inp != "")
	{
		alert("Found records: " + rows.length);
		$('#dg').datagrid('loadData', rows);
	}
}

Thanks & Regards,
Darrel

[jarry]

To highlight the cells, you should define the 'styler' property on each column.

Code:

var regExp = null;
function doSearch(value){
	regExp = value ? new RegExp(value, 'i') : null;
	var data = $('#dg').datagrid('getData');
	$('#dg').datagrid('loadData', data);
}
function cellStyler(value,row,index){
	if (!regExp){return;}
	value = String(value || '');
	if (regExp.test(value)){
		return 'color:red';
	}
}

For more information please look at this example http://code.reloado.com/elexay3/edit#html,live

[Darrel]

Hi jarry,

Thanks a lot for your reply. I've modified the code slightly as per my requirements.
The modified reloado code for the same is: http://code.reloado.com/elexay3/5/edit

Regards,
Darrel

[thecyberzone]

Thanks jerry for your beautiful example. If I want automatic datagrid refresh with each keystorke in searchbox, rather than pressing search icon at the right side of search-box what modification I have to do?

[jarry]

You can press ENTER to do the same as clicking the search icon.

[thecyberzone]

Actually what I want, just to filter the datagrid output according to the keystroke of serachbox.