{"id":26188183,"url":"https://github.com/peopledatalabs/pdl-react-autocomplete","last_synced_at":"2025-04-15T00:56:09.217Z","repository":{"id":37833866,"uuid":"482013021","full_name":"peopledatalabs/pdl-react-autocomplete","owner":"peopledatalabs","description":"React Component for AutoComplete","archived":false,"fork":false,"pushed_at":"2025-04-13T11:39:09.000Z","size":1479,"stargazers_count":9,"open_issues_count":0,"forks_count":2,"subscribers_count":4,"default_branch":"main","last_synced_at":"2025-04-15T00:56:02.109Z","etag":null,"topics":["autocomplete","autocomplete-component","react","react-component-library"],"latest_commit_sha":null,"homepage":"https://docs.peopledatalabs.com/docs/react-component-for-autocomplete","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/peopledatalabs.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-04-15T16:07:11.000Z","updated_at":"2025-04-13T11:30:59.000Z","dependencies_parsed_at":"2023-02-08T06:45:18.895Z","dependency_job_id":"feed58af-0562-4479-b563-47f55cd8950b","html_url":"https://github.com/peopledatalabs/pdl-react-autocomplete","commit_stats":{"total_commits":149,"total_committers":4,"mean_commits":37.25,"dds":0.08724832214765099,"last_synced_commit":"2840155df626c34b4043ac3557828ea366ae158a"},"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peopledatalabs%2Fpdl-react-autocomplete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peopledatalabs%2Fpdl-react-autocomplete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peopledatalabs%2Fpdl-react-autocomplete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/peopledatalabs%2Fpdl-react-autocomplete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/peopledatalabs","download_url":"https://codeload.github.com/peopledatalabs/pdl-react-autocomplete/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248986280,"owners_count":21194025,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["autocomplete","autocomplete-component","react","react-component-library"],"created_at":"2025-03-11T23:57:15.568Z","updated_at":"2025-04-15T00:56:09.201Z","avatar_url":"https://github.com/peopledatalabs.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003cp align=\"center\"\u003e\n\u003cimg src=\"https://www.peopledatalabs.com/images/company-logo.png\" style=\"background-color: white; padding: 5px 10px;\" width=\"250\" alt=\"People Data Labs Logo\"\u003e\n\u003c/p\u003e\n\u003ch1 align=\"center\"\u003ePDL React Autocomplete\u003c/h1\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"\"\u003e\n    \u003cimg src=\"https://img.shields.io/badge/repo%20status-Active-limegreen\" alt=\"Repo Status\"\u003e\n  \u003c/a\u003e\u0026nbsp;\n  \u003ca href=\"https://www.npmjs.com/pdl-react-autocomplete\"\u003e\n    \u003cimg src=\"https://img.shields.io/npm/v/pdl-react-autocomplete.svg?logo=npm\u0026logoColor=fff\u0026label=NPM+package\u0026color=limegreen\" alt=\"PDL React Autocomplete\" /\u003e\n  \u003c/a\u003e\u0026nbsp;\n\u003c/p\u003e\n\nThis 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.\n\n\u003cp align=\"center\"\u003e\n  \u003cimg src=\"https://user-images.githubusercontent.com/103519873/167505702-34fc2580-1ea3-47a4-83f0-c9f5a6fb6aeb.gif\"/\u003e\n\u003c/p\u003e\n\nFor 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.\n\n## Table of Contents\n- [🔧 Installation](#installation)\n- [🚀 Usage](#usage)\n- [📘 Documentation](#documentation)\n- [🔒 Security Disclaimer](#security)\n\n## 🔧 Installation \u003ca name=\"installation\"\u003e\u003c/a\u003e\n\n1. Pull the package from the npm repository:\n\n```bash\nyarn add pdl-react-autocomplete\n```\nor\n```bash\nnpm i pdl-react-autocomplete\n```\n\n2. Sign up for a [free PDL API key](https://www.peopledatalabs.com/signup)\n\n## 🚀 Usage \u003ca name=\"usage\"\u003e\u003c/a\u003e\n\nFirst, import the component library:\n```js\nimport Autocomplete from 'pdl-react-autocomplete';\n```\n\nThen, use the library like any other React component:\n```js\n  return (\n    \u003cdiv className=\"App\"\u003e\n      \u003cAutocomplete\n        field={'company'}\n        size={5}\n        onTermSelected={(term) =\u003e console.log('onSelectedTerm', term)}\n        apiKey={'insertKeyHere'}\n      /\u003e\n    \u003c/div\u003e\n  );\n```\n\n## 📘 Documentation \u003ca name=\"documentation\"\u003e\u003c/a\u003e\nThe Autocomplete API endpoint is documented here: https://docs.peopledatalabs.com/docs/autocomplete-api\n\n### Props\n1. **field** (required)\n    - 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.\n      - The list of all valid arguments is:\n        1. company\n        2. country\n        3. industry\n        4. location\n        5. major\n        6. region\n        7. role\n        8. school\n        9. sub_role\n        10. skill\n        11. title\n        12. website\n\n    - 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](https://docs.peopledatalabs.com/docs/input-parameters-autocomplete-api) documentation\n\n2. **onTermSelected** (required)\n    - 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.\n\n3. **API Key** (required)\n    - PDL API Key required to avoid a 401 error.\n\n4. **size**\n    - Number of results returned for autocompletion. Must be between 1 and 100. Set to 10 by default.\n\n### Styling\nRefer to the styles in this [css file](https://github.com/peopledatalabs/pdl-react-autocomplete/blob/first/src/index.css) and override the styling of an existing class by creating a new code block with the same class name, but with the '!important' tag.\n```css\n.pdl-suggestion {\n    width: 100%;\n    padding: .5rem;\n    justify-content: space-between;\n}\n\n/* your styling override */\n.pdl-suggestion {\n    background-color: red !important;\n}\n```\n\n## 🔒 Security Disclaimer \u003ca name=\"security\"\u003e\u003c/a\u003e\nThis 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.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeopledatalabs%2Fpdl-react-autocomplete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fpeopledatalabs%2Fpdl-react-autocomplete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fpeopledatalabs%2Fpdl-react-autocomplete/lists"}