Autocomplete input field, using the fetch api
Autocomplete field written in React. A couple of points:
To configure the FetchAutoComplete Component you can pass the following
properties:
import { FetchAutoComplete } from 'fetch-autocomplete'
<FetchAutoComplete inputClass='autocomplete-field' resultsClass='autocomplete-results'
mainHolderClass='autocomplete' defaultSearchText='Search...'
defaultKeyPresses={3} fetchUrl='http://localhost:8888/data' fetchMethod='POST'
fetchMode='cors'
></FetchAutoComplete>
The options that you definitely want to configure are:fetchUrl
=> url endpointfetchMode
=> ‘cors’ or ‘no-cors’, depending on how you use the
autocomplete field
The request format is:
{
"search": "value"
}
The response format needs to look like this:
{
"data": [
{"identifier": "title", "value": "mysearch", "url": "http://dummy.com"},
{"identifier": "title", "value": "searchme", "url": "http://test.com"}
]
}
Pretty much data is an array of the search results. Currently only the value
and url
are used to display the results. Future versions will use more options ;)