Adding a Search Feature for Filters

Finding the right filter in a dashboard with many options can be frustrating. Instead of scrolling endlessly, you can add a search box to make it easier to find the filter you need. This guide will show you how to quickly set up a search feature for your Sisense dashboard filters.

Steps:

1. Open Your Dashboard

2. Insert below dashboard Script

3. Save and Refresh the Dashboard

dashboard.on('initialized', function (se, ev) {
	$('.filters-headline').css({'height':'50%', });
	$('.filters-global-header').css('height', '65px');

	let searchBox = $('#custom-filter-search');

	if(searchBox) {
		searchBox.remove()
	}

	let $input = $('<input type="text" placeholder="Search..." id="custom-filter-search">');
	$input.css({
		'width': '95%',
		'margin-left': '5px',
		'border-radius': '3px',
		'border': '1.5px solid #bfbfbf',
		'background-color': '#ffffff',
		'font-size': '13px',
		'color': '#757575'
	})
	$('.filters-global-header').append($input);
	$input.on('input', function(){
		const inputValue = $(this).val().toUpperCase();

		$('.global-filters .ew-content-host .ew-panel .ew-item-wrapper').each(function(index, element){
			if ($(this).find('.f-header-host .ew-i-caption').text().toUpperCase().includes(inputValue)) {
				$(this).css('display', 'block')
			} else {
				 $(this).css('display', 'none')
			}
		})
	})
})