Searching

Generic UI grid has a built-in search feature. When a user types some text into the input grid will scan for this phrase in the data and it will present all rows which match wanted phrase.

It allows to search value in all type: 'string' columns. So it will work for columns that have a type specified as 'string'. Search will not take into consideration columns of type: number, date, boolean, etc. To read more about types of columns see this guide Columns and their types.

It is really simple to turn on searching. You just have to set the input searching to true. Default value is false.

Example
Code
$('#jquery-searching-grid').guiGrid({
	columns: [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
	}],

	source: [...heroes],

	maxHeight: 400,

	searching: {
		enabled: true
	}
});

Search highlighting & initial phrase

The search feature allows highlighting search phrases. It is easy to enable just change the flag highlighting to true . All of the matched phrases with be highlighted by the yellow label, which makes them easy to spot.

You can also specify a starting search phrase. To do it use config property phrase. Grid will filter out values that do not fit the search phrase from the start.

Grid search allows a lot of configurations, one of them is a placeholder. It relates to the text which appears in the search input as a placeholder or suggestion.

Example
Code
$('#jquery-search-highlight').guiGrid({
	columns: [{
		header: 'Index',
		field: 'index',
		width: 60
	}, {
		header: 'Character',
		field: 'character'
	}, {
		header: 'Real name',
		field: 'name'
	}, {
		header: 'Abilities',
		field: 'abilities'
	}],

	source: this.source,

	searching: {
		enabled: true,
		placeholder: 'Search heroes',
		phrase: 'man',
		highlighting: true
	}
});

Search matcher - working with complex objects

Sometimes you need to use in the column a more complex value e.g. object, in that case, it seems natural that search requires more configuration. The grid search features work on the primitive values, so you need to specify which property in the object should be used for searching. You can do that by specifying the matcher, just like in the example below. Matcher is a function which is used by the grid to get the property from the object and use it for searching.

Example
matcher.js
projects.js
$('#gui-search-matcher').guiGrid({

	columns: [{
		header: 'Project name',
		field: 'name'
	}, {
		header: 'Owner',
		field: 'owner',
		view: (owner: any) => {
			return '<b>' + owner.firstName + ' ' + owner.lastName + '</b>';
		},
		matcher: (owner: any) => {
			return owner.firstName + ' ' + owner.lastName;
		}
	}, {
		header: 'Company',
		field: 'company',
		type: 'string'
	}, {
		header: 'Deadline',
		field: 'deadline',
		type: 'date'
	}, {
		header: 'Progress',
		field: 'progress',
		type: 'number',
		view: 'percentage'
	}],

	source: this.source,

	searching: {
		enabled: true,
		placeholder: 'Search project'
	},

	maxHeight: 400
});
const projects = [{
	name: 'Fusion',
	company: 'ACME Corporation',
	deadline: new Date(2020, ...),
	progress: 72,
	owner: {
		firstName: 'Bruce',
		lastName: 'Wayne'
	}
}, ...];

Searching - options

OptionsTypeDefaultDescription
enabledbooleanfalse Enables searching feature.
highlightingbooleanfalse Enables highlighting, which marks search phrase in the grid.
placeholderstring'Search' Configures placeholder for input search field.
phrasestring- Starting search phrase for the searching feature.

Searching - events

Event nameTypeDescription
searchPhraseChangedstringEmits search phrase typed in the search input by the user.

Related articles: