The base requirements for an
AutoComplete are to provide an
id, a list of
data to filter, and a
filter behavior/custom function. However, it is
recommended to also provide a
aria-label for additional
accessibility and a
placeholder value for additional context.
Since there are a lot of different ways to filter, this library will be keeping it simple and only providing two filter functions out of the box:
"case-insensitive"(default) - A simple case insensitive filter that will only show results that contain the input's value in order ignoring case
"fuzzy"- A fuzzy filter that will show any results that just contain the same letters in any order ignoring case.
To start off simple, the following examples will just filter based off a list of fruits and show these two filter behaviors.
Since it isn't extremely helpful to only use strings, the
also filter and display a list of objects. The base requirements for an object
result is that it should have:
labelkey or a
childrenkey - This is what will be displayed in the suggestions dropdown menu
valuekey - This is the searchable string that is used for filtering down the data by the current text field's value.
This allows you to have more complex suggestions by being able to render custom styles within the dropdown list, but still being searchable. In addition, you can use all the list item props for adding icons, avatars, or even media in the suggestion list.
You can also customize this behavior a bit by changing the
valueKey props to be different values if your object is simple and don't want
to transform it to match this structure.
AutoComplete also supports some basic support for highlight letters that
match the text field's value when the list of data have string labels. This will
only work for
"case-insensitive" filtering or a custom filter function that
ensures that the matches always match all the letters in order.
If you need more robust highlighting, you can also update the
prop and implement your own highlighting behavior instead.