{"id":20388169,"url":"https://github.com/boweihan/autosuggest-web-component","last_synced_at":"2026-05-10T00:49:29.941Z","repository":{"id":35045985,"uuid":"200140260","full_name":"boweihan/autosuggest-web-component","owner":"boweihan","description":"Client-side debounced autosuggest web component leveraging custom elements and shadow dom","archived":false,"fork":false,"pushed_at":"2023-01-04T06:05:34.000Z","size":2055,"stargazers_count":2,"open_issues_count":21,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-02-16T20:19:33.971Z","etag":null,"topics":["autosuggestion","client-side-filtering","htmlelement","shadow-dom","web-component"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/autosuggest-web-component","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/boweihan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2019-08-02T01:09:28.000Z","updated_at":"2020-04-23T21:12:03.000Z","dependencies_parsed_at":"2023-01-15T12:41:51.858Z","dependency_job_id":null,"html_url":"https://github.com/boweihan/autosuggest-web-component","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boweihan%2Fautosuggest-web-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boweihan%2Fautosuggest-web-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boweihan%2Fautosuggest-web-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/boweihan%2Fautosuggest-web-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/boweihan","download_url":"https://codeload.github.com/boweihan/autosuggest-web-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241940529,"owners_count":20045878,"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":["autosuggestion","client-side-filtering","htmlelement","shadow-dom","web-component"],"created_at":"2024-11-15T03:07:44.017Z","updated_at":"2026-05-10T00:49:29.888Z","avatar_url":"https://github.com/boweihan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003c!-- START doctoc generated TOC please keep comment here to allow auto update --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\u003c!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE --\u003e\n\n- [autosuggest-web-component](#autosuggest-web-component)\n  - [Installation](#installation)\n  - [Import](#import)\n  - [Example Usage](#example-usage)\n  - [Configuration Options](#configuration-options)\n  - [Disclaimer](#disclaimer)\n\n\u003c!-- END doctoc generated TOC please keep comment here to allow auto update --\u003e\n\n# autosuggest-web-component\n\n![](autosuggest-web-component.gif)\n\n## Installation\n\n`npm install -- save autosuggest-web-component`\n\n## Import\n\nAfter installing the web component via package manager. Import it into your application.\n\n`import \"autosuggest-web-component\"`\n\nA polyfill (webcomponentjs) is applied along with the import.\n\n## Example Usage\n\nThe base requirement to use this component is to create the element, pass in an array of (string) words that you wish to autosuggest against, and append the element to the DOM.\n\n```\nimport \"autosuggest-web-component\";\nimport words from \"./words\";\n\nconst autosuggest = document.createElement(\"bh-autosuggest\");\nautosuggest.words = words;\ndocument.body.appendChild(autosuggest);\n```\n\n## Configuration Options\n\nConfiguration can be passed in via the options property.\n\nDefault configuration options (can all be overridden):\n\n```\nautosuggest.options = {\n  // input placeholder\n  placeholder: \"Type here...\",\n\n  // css template string for input field\n  inputCss: `{\n    border: 1px solid black;\n    padding: 10px;\n    font-size: 14px;\n    box-shadow: 1px 1px 1px 1px;\n    width: calc(100% - 20px);\n    margin: 10px;\n    margin-bottom: 0px;\n  }`,\n\n  // css template string for suggestion box\n  suggestionCss: `{\n    background-color: #f2f2f2;\n    margin: 10px;\n    margin-top: 0px;\n  }`,\n\n  // css template string for individual result\n  resultCss: `{\n    margin: 0;\n    padding: 10px;\n    overflow: hidden;\n    border-bottom: 1px solid lightgray;\n  }`,\n\n  // debounce time in ms\n  debounce: 0,\n};\n```\n\n## Disclaimer\n\nClient side autosuggestion is great for small data sets but might not be the best solution for larger data sets (i.e. entire language dictionaries).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboweihan%2Fautosuggest-web-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fboweihan%2Fautosuggest-web-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fboweihan%2Fautosuggest-web-component/lists"}