Interactive Report Custom Search with Cell Highlight
In this tutorial you will learn how to search and highlight data in interactive report using javascript.
Solution
1) Create an Interactive Report (we will use default Interactive Report search bar)
2) Give your report a Class Name “CustomSearch” in report properties under Appearance Section
3) Now edit the page and go to Page Properties
4) Paste below code under Execute When Page Load section.
$('.a-IRR-search-field').keyup(function() {
v_search = $('.a-IRR-search-field').val();
v_search = v_search.toLowerCase();
$(".CustomSearch td").each(function() {
cellData = $(this).text();
cellData = cellData.toLowerCase();
cellData = cellData.search(v_search);
if ((cellData != '-1' || cellData == 0) && v_search != '') {
$(this).closest('td').addClass('u-success');
}
else if (cellData == '-1') {
$(this).closest('td').removeClass('u-success');
}
else
$(this).closest('td').removeClass('u-success');
});
});
5) Run your application and try to search something.
Note: Do not press enter, Code will work on Key Up.
