algolia-react-autocomplete

import algoliasearch from "algoliasearch";
 
import Autocomplete from "algolia-react-autocomplete";
import "algolia-react-autocomplete/build/css/index.css";
 
 
// init algoliasearch sdk and indexes
const client = algoliasearch('myApplicationID', 'myApiKey');
const indexes = [
      {
        source: this.client.initIndex("players"),
        displayKey: 'name',
        templates: {
          header: () => <h2 className="aa-suggestions-category"> Players</h2>
          suggestion: (suggestion, isSelected) => <div data-selected={isSelected}> {suggestion.name} </div>
        }
      },
]
 
 
// in your render method
<Autocomplete indexes={indexes} onSelectionChange={selectedSuggestion => console.log(selectedSuggestion)>
    <input key="input" type="search" className="aa-input-search" autocomplete="off" />
</Autocomplete>