Search Box

Search box is simply an input with action called on change. This can be wired up to other component to provide full text searching over data. This also automatically change URL to reflect searched query.

Use $action parameter to bind this to other components like in Grid View widget.

Using default parameters will produce following input:

echo SearchBox::widget();

Example of using $action parameter combined with grid view search action. Parameter $value initializes value of input on first page load. Notice that initial value is not automatically set, it must be provided by cooperating component.

By using ActionUrl, we can instruct SearchBox to call JavaScript action search.

In this example the built-in grid searching is disabled to show example of attaching searching to different widget.

Prepare grid view widget instance but do not output it yet. We will use grid widget instance as parameter for ActionUrl used in SearchBox widget configuration.

$grid = GridView::widget([
	'dataProvider' => new DataProvider(ExampleUser::class, [
		'pagination' => [
			'size' => 10
		]
	]),
	'show' => [
		'searching' => false
	],
	'columns' => [
		'firstName',
		'lastName',
		'email',
		'active'
	]
]);

The actual code and example of SearchBox attached to grid view. Typing text into search input will trigger the search method in JavaScript side of grid view widget. The search method in turn will call ajax request for server side widget action with method named actionSearch. SearchBox is outputted first, so it appeared above grid view which is echoed later.

echo SearchBox::widget([
	'action' => new ActionUrl($grid, 'search'),
	'value' => 'John',
	'iconPlacement' => Placement::Right
]);
echo $grid;