Name: react-fuzzy-search
Owner: Storybook
Description: A fuzzy search component written in React
Forked from: ritz078/react-fuzzy-search
Created: 2017-05-10 18:37:56.0
Updated: 2017-05-10 19:50:05.0
Pushed: 2018-03-31 22:20:45.0
Size: 96
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|
Other Committers
| User | Most Recent Commit | # Commits |
|---|
fuzzy search in React
install --save @storybook/react-fuzzy
t list = [{
: 1,
tle: 'The Great Gatsby',
thor: 'F. Scott Fitzgerald'
: 2,
tle: 'The DaVinci Code',
thor: 'Dan Brown'
: 3,
tle: 'Angels & Demons',
thor: 'Dan Brown'
zySearch
list={list}
keys={['author', 'title']}
width={430}
onSelect={action('selected')}
/>
zySearch
st={list}
ys={['author', 'title']}
dth={430}
Select={action('selected')}
sultsTemplate={(props, state, styles, clickHandler) => {
return state.results.map((val, i) => {
const style = state.selectedIndex === i ? styles.selectedResultStyle : styles.resultsStyle;
return (
<div
key={i}
style={style}
onClick={() => clickHandler(i)}
>
{val.title}
<span style={{ float: 'right', opacity: 0.5 }}>by {val.author}</span>
</div>
);
});
attribute|default|description
———|——-|———–
caseSensitive|false|Indicates whether comparisons should be case sensitive.
className|null|give a custom class name to the root element
distance|100|Determines how close the match must be to the fuzzy location (specified by location). An exact letter match which is distance characters away from the fuzzy location would score as a complete mismatch. A distance of 0 requires the match be at the exact location specified, a distance of 1000 would require a perfect match to be within 800 characters of the location to be found using a threshold of 0.8.
id|null|The name of the identifier property. If specified, the returned result will be a list of the items' identifiers, otherwise it will be a list of the items.
include|[]|An array of values that should be included from the searcher's output. When this array contains elements, each result in the list will be of the form { item: ..., include1: ..., include2: ... }. Values you can include are score, matches. Eg: { include: ['score', 'matches' ] }
maxPatternLength|32|The maximum length of the pattern. The longer the pattern, the more intensive the search operation will be. Whenever the pattern exceeds the maxPatternLength, an error will be thrown.
onSelect| noop | Function to be executed on selection of any result.
width|430|width of the fuzzy searchbox
keys|all[Array]|List of properties that will be searched. This also supports nested properties.
list|null|Array of properties to be filtered.
placeholder|'Search'|Placeholder of the searchbox
resultsTemplate| Func | Template of the dropdown divs
shouldSort| true | Whether to sort the result list, by score.
sortFn|Array.prototype.sort|The function that is used for sorting the result list.
threshold|0.6|At what point does the match algorithm give up. A threshold of 0.0 requires a perfect match (of both letters and location), a threshold of 1.0 would match anything.
tokenize|false|When true, the search algorithm will search individual words and the full string, computing the final score as a function of both. Note that when tokenize is true, the threshold, distance, and location are inconsequential for individual tokens.
verbose|false|Will print to the console. Useful for debugging.
MIT @ Ritesh Kumar