FilterSuggest
A react component for achieving search-as-you-type functionality on a list of option items. The actual sorting & filtering of items is left up to you, making it easy to combine data from multiple sources (synchronous & asynchronous).
Implemented using downshift and material-components-web-react.
Demo
https://dan-kwiat.github.io/filter-suggest
Installation
With Yarn:
yarn add filter-suggest
Or npm:
npm install --save filter-suggest
You'll need to have the peer dependencies installed too:
,
Examples
Sync
A basic synchronous example using match-sorter to sort items:
import React useState from 'react'import FilterSuggest from 'filter-suggest'import 'filter-suggest/es/index.css'import matchSorter from 'match-sorter' const ITEMS = id: `movie-1` icon: null primary: 'movie:The Big Short' secondary: 'Filter by movie' // add more items here const Demo = const inputValue setInputValue = const sortedItems = inputValue ? : return <FilterSuggest = ='Start typing...' = = = />
See the demo source code for a more comprehensive synchronous example.
Async
A basic asynchronous example using a dummy GraphQL endpoint to fetch sorted items:
import React Component from 'react'import debounce from 'lodash.debounce'import gql from 'graphql-tag'import Query from 'react-apollo'import FilterSuggest from 'filter-suggest'import 'filter-suggest/es/index.css' const DEBOUNCE_TIME = 100const applyDebounced = const QUERY = gql` query GET_ITEMS( $search: String! ) { getItems( search: $search ) { id primary secondary } }` state = inputValue: '' variables: search: '' { this } { this } { this } { const inputValue variables = thisstate return <Query = => data loading error return <FilterSuggest = ='Search async' = = = = /> </Query> }
For a seamless search-as-you-type experience, results should be returned very quickly (say of the order 100ms). You might want to look at Elasticsearch completion suggester or PostgreSQL trigram indices.
See charity-base-search for a real-world asynchronous example.
Props
FilterSuggest accepts the following props:
FilterSuggestpropTypes = // Optional class applied to the parent div className: PropTypesstring // Error message to render instead of dropdown errorMessage: PropTypesstring // The current value of the input (you must handle the state yourself) inputValue: PropTypesstringisRequired // An array of items to render in the dropdown items: PropTypesisRequired // The input label label: PropTypesstring // Optional icon element to prefix the input leadingIcon: PropTypeselement // Whether or not the items are loading loading: PropTypesbool // Maximum number of items to render in dropdown list maxSuggestions: PropTypesnumber // Optional class applied to the dropdown menu menuClassName: PropTypesstring // Blur event handler onBlur: PropTypesfunc // Focus event handler onFocus: PropTypesfunc // A callback fired whenever an input value change is detected onInputValueChange: PropTypesfuncisRequired // A callback fired whenever an item is selected onSelect: PropTypesfuncisRequired // Whether or not to render the outlined variant of text field outlined: PropTypesbool // Optional class applied to the input element's parent textFieldClassName: PropTypesstringFilterSuggestdefaultProps = label: 'Start typing...' maxSuggestions: 12
Styles
With CSS:
With Sass:
The colour theme can be customised using the following Sass mixin:
;
For further customisation see MDC Web's mixins for the text field and list.
You may also supply textFieldClassName
and menuClassName
props which will be applied to the appropriate components.