Search Filter

SearchFilter

The searchFilter can be used for searching specific items and then using the button on the left hand side to filter down your results.

Props

The props needed for this component are listed and explained below:

• placeholder - This prop must be a text

• onChange - This prop must be a function

• filter - This prop must be a string

• value - This prop must be a string

• shouldFocusInput - This prop must be a boolean

• onFilterChanged - This prop must be a function

• filters - This prop must be a array of objects with the given keys shown in the example.

Example

<SearchFilter
	placeholder="enter text here" 
	onChange={this.onChange}
	filter={this.state.filter}
	value={this.state.value}
	shouldFocusInput={false}
	onFilterChanged={this.onFilterChanged}
	filters={[
		{
			text: 'Filter 1',
			_value: 'Filter 1'
		},
		{
			text: 'Filter 2',
			_value: 'Filter 2'
		},
		{
			text: 'Filter 3',
			_value: 'Filter 3'
		}
	]}
/>

// ...React Component
getInitialState: function() {
	return {
		searchValue: "",
		filter: ""
	}
},

onChange: function(value) {
	this.setState({
		searchValue: value
	})
},

onFilterChanged: function(value) {
	this.setState({
		filter: value
	})
},

Related

• SearchBar