search

fmoo / react-typeahead

Pure react-based typeahead and typeahead-tokenizer
ISC License
677 stars 232 forks source link

Add more flexible filtering (searchOptions and inputDisplayOptions prop) #194

Closed wolfd closed 8 years ago

wolfd commented 8 years ago

Related to: https://github.com/fmoo/react-typeahead/issues/42 https://github.com/fmoo/react-typeahead/issues/83

New prop: searchOptions

Right now react-typeahead doesn't allow you to provide a way to do complex filtering on the options provided. This PR adds a new prop called searchOptions that allows the user to sort, filter, and map the results in any way necessary.

The default fuzzy search gets access to more advanced functionality than filterOption provides, the main purpose of this PR is to allow users to access that functionality.

I needed this functionality to provide information to the displayOption prop about which characters were being matched in a fuzzy search, but in order to save that information, the best way would be to have some metadata stored with the results. Providing a mapping function in searchOptions that stores the score, matched characters, and the original string allows you to display the values in the dropdown however you want. The inputDisplayOption allows you to save a different value in the input field when an option is selected.

Example usage

example-usage

Changes to _onOptionSelected

I made inputDisplayOption the default (if it exists) for the value that gets set in _onOptionSelected to be the entryValue, with the same fallback to displayOption that already existed.

The value that gets set in the 'selection' uses formInputOption first, then inputDisplayOption, and finally displayOption if the other two aren't provided.

I wanted to maintain backwards compatibility, but there is some argument to be made that the two options might not both be necessary. On the other hand, one updates the visible text input value, the other updates the hidden value, both are useful.

Misc notes

If searchOptions is provided, filterOption will not be used, so it warns the user of that. This warning could be removed, though.

I think this addition to react-typeahead paves the way for really interesting functionality.

wolfd commented 8 years ago

I changed the name of the first field to searchOptions to better reflect its functionality.

wolfd commented 8 years ago

Fixed up PR to work with the recently merged https://github.com/fmoo/react-typeahead/pull/196

fmoo commented 8 years ago

Can you add props.searchOptions to the Tokenizer too? We don't need inputDisplayOption for the tokenizer since the input doesn't have an active state (selecting an option adds a token instead).

wolfd commented 8 years ago

There, that should be that. I did some rudimentary testing using the tokenizer-topcoat.html file.

The JSXTransformer requirement on that was messing with how things were working. Apparently they're doing babel transformation in the browser now. Are there plans to change that over? I did some local hacks to that file to get it working for the test I did, but I think there's probably a better solution than the simple stuff I did.

fmoo commented 8 years ago

This is in as 2.0.0-alpha.4