pdl-react-autocomplete

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.

Table of Contents

• 🔧 Installation
• 🚀 Usage
• 📘 Documentation
• 🔒 Security Disclaimer

🔧 Installation

• Pull the package from the npm repository:

yarn add pdl-react-autocomplete

or

npm i pdl-react-autocomplete

• 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>
  );

📘 Documentation

The Autocomplete API endpoint is documented here: https://docs.peopledatalabs.com/docs/autocomplete-api

Props

• field (required)

  • The field input parameter specifies which type of field to run autocomplete for. The fields supported by the Autocomplete API map to a subset of the Person Schema fields.

    • The list of all valid arguments is:
      • company
      • country
      • industry
      • location
      • major
      • region
      • role
      • school
      • sub_role
      • skill
      • title
      • website

  • 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

• 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.

• API Key (required)

  • PDL API Key required to avoid a 401 error.

• size

  • Number of results returned for autocompletion. Must be between 1 and 100. Set to 10 by default.

Styling

Refer to the styles in this css file and override the styling of an existing class by creating a new code block with the same class name, but with the '!important' tag.

.pdl-suggestion {
    width: 100%;
    padding: .5rem;
    justify-content: space-between;
}

/* your styling override */
.pdl-suggestion {
    background-color: red !important;
}

🔒 Security Disclaimer

This library should be used as an internal tool or as a proof of concept as it fires off requests to the PDL Autocomplete API from the client. This is due to the nature of being a react component and API Keys being all encompassing at PDL. We highly suggest referencing the component's code base for spinning up your own version but accessing the PDL Autocomplete API via a proxy server and not using this in a public production environment.