The React Component for Autocomplete lets you utilize the Autocomplete API to find valid Search API query values for a specific field (along with the number of available records for each suggestion.) It does this by letting your users get autocomplete suggestions in a dropdown list, within which they will make a suggestion that will be passed to a callback function.

For example, when a user queries the company field for "goog," the autocomplete component will display a dropdown list that includes suggestions that most closely matches this search, such as "google." The user then makes a selection, which gets sent as an argument to a callback function that has been passed to the component as a prop.

Installation

Go to https://github.com/peopledatalabs/pdl-react-autocomplete and pull the package from the npm repository by either using:

yarn add pdl-react-autocomplete

or

npm i pdl-react-autocomplete

Finally, Sign up for a free PDL API key.

Usage

First import the component library:

import Autocomplete from 'pdl-react-autocomplete';

Then use the library like any other React component:

return (
    <div className="App">
      <Autocomplete
        field={'company'}
        size={5}
        onTermSelected={(term) => console.log('onSelectedTerm', term)}
        apiKey={'insertKeyHere'}
      />
    </div>
  );