A react component for the People Data Labs Autocomplete API
npm install pdl-react-autocomplete
This library allows users to search the PDL Autocomplete API for valid Search API query values within a specific field along with the number of available records for each suggestion, receive autocompetion suggestions in a drop down of options, and then select a suggestion to be passed into a callback function.

For example, a user queries the 'company' field with the text of 'goog' as a search term, and the autocomplete component will show a dropdown of options that most closely match this search, such as 'google'. The user either clicks or uses their keyboard to select 'google', and 'google' gets passed as the argument to a callback function has been passed down to this component as a prop.
1. Pull the package from the npm repository:
``bash`
yarn add pdl-react-autocomplete`
orbash`
npm i pdl-react-autocomplete
2. Sign up for a free PDL API key
First, import the component library:
`js`
import Autocomplete from 'pdl-react-autocomplete';
Then, use the library like any other React component:
`js`
return (
size={5}
onTermSelected={(term) => console.log('onSelectedTerm', term)}
apiKey={'insertKeyHere'}
/>
);
- Each field argument value for the Autocomplete API maps to a specific subset of Person Schema fields. To see the exact mappings, visit the Autocomplete API Input Parameters documentation
2. onTermSelected (required)
- Callback function to be executed on the text of the input, but only as a result of selecting an autocompletion suggestion by mouse click or the 'enter' key.
3. API Key (required)
- PDL API Key required to avoid a 401 error.
4. size
- Number of results returned for autocompletion. Must be between 1 and 100. Set to 10 by default.
css
.pdl-suggestion {
width: 100%;
padding: .5rem;
justify-content: space-between;
}/ your styling override /
.pdl-suggestion {
background-color: red !important;
}
``