{"id":13559410,"url":"https://github.com/stefanhuber/web-complete","last_synced_at":"2025-03-16T20:30:49.237Z","repository":{"id":38454759,"uuid":"210314734","full_name":"stefanhuber/web-complete","owner":"stefanhuber","description":"A lightweight, dependency-free, styleable autocomplete web component","archived":false,"fork":false,"pushed_at":"2023-01-06T02:11:45.000Z","size":496,"stargazers_count":19,"open_issues_count":13,"forks_count":1,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-27T12:46:31.764Z","etag":null,"topics":["autocomplete","html","stencil","stenciljs","web-component"],"latest_commit_sha":null,"homepage":"https://stefanhuber.github.io/web-complete/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-2-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/stefanhuber.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}},"created_at":"2019-09-23T09:24:18.000Z","updated_at":"2023-12-01T07:21:09.000Z","dependencies_parsed_at":"2023-02-05T02:31:17.691Z","dependency_job_id":null,"html_url":"https://github.com/stefanhuber/web-complete","commit_stats":null,"previous_names":[],"tags_count":8,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanhuber%2Fweb-complete","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanhuber%2Fweb-complete/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanhuber%2Fweb-complete/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/stefanhuber%2Fweb-complete/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/stefanhuber","download_url":"https://codeload.github.com/stefanhuber/web-complete/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243826798,"owners_count":20354221,"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","html","stencil","stenciljs","web-component"],"created_at":"2024-08-01T13:00:21.293Z","updated_at":"2025-03-16T20:30:48.816Z","avatar_url":"https://github.com/stefanhuber.png","language":"TypeScript","funding_links":[],"categories":["List of Awesome Components Made using StencilJS"],"sub_categories":["Individual Components"],"readme":"![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D\u0026colorA=16161d\u0026style=flat-square) [![Published on webcomponents.org](https://img.shields.io/badge/webcomponents.org-published-blue.svg)](https://www.webcomponents.org/element/web-complete) [![Build Status](https://travis-ci.com/stefanhuber/web-complete.svg?branch=master)](https://travis-ci.com/stefanhuber/web-complete)\n\n\u003e `web-complete` is a lightweight, dependency-free, styleable autocomplete web component.\n\n# Installation\n\n## Script tag\n\n```html\n\u003cscript type=\"module\" src=\"https://unpkg.com/web-complete\"\u003e\u003c/script\u003e\n\u003cscript nomodule src=\"https://unpkg.com/web-complete/dist/web-complete/web-complete.js\"\u003e\u003c/script\u003e\n```\n\n## Node Module\n\n - Install via npm: `npm install web-complete --save`\n - Add script to html: `\u003cscript src='node_modules/web-complete/dist/web-complete.js'\u003e\u003c/script\u003e`\n - Or import as JS module: `import 'web-complete';`\n\n## Framework integration\n\nFor integration with different frameworks the [stencil docs](https://stenciljs.com/docs/overview) should be consulted.\n\n# Using this component\n\nAdd the component to your html:\n```html\n\u003cweb-complete id=\"my-web-complete\"\u003e\u003c/web-complete\u003e\n```\n\nAdd some javascript for additional configuration:\n```javascript\nconst webcomplete = document.querySelector('#my-web-complete');\n\n// change css classes for styling\nwebcomplete.cssClasses = {\n \"wrapper\": \"dropdown\",\n \"input\": \"form-control\",\n \"suggestions\": \"dropdown-menu show\",\n \"suggestion\": \"dropdown-item\",\n \"active\": \"active\"\n};\n\n// add an async suggestion generator\nwebcomplete.suggestionGenerator = function(text) {\n return new Promise(function(resolve, reject) {\n // generate suggestions with input text\n // e.g. by using http fetch \n });\n};\n\n// listen to selected/unselected events\nwebcomplete.addEventListener('selected', function(e) {\n // suggestion selected (e.detail)\n});\nwebcomplete.addEventListener('unselected', function(e) {\n // suggestion unselected (e.detail)\n});\n```\n\nA full example with [Bootstrap 4 Dropdown](https://getbootstrap.com/docs/4.3/components/dropdowns/) theming can be found [here](https://github.com/stefanhuber/web-complete/blob/master/docs/index.html).\n\n# Component API\n\n## Properties\n\n| Property | Attribute | Description | Type | Default |\n| -------------------------- | ----------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------- |\n| `clearOnUnselectedClosing` | `clear-on-unselected-closing` | If no value is selected, clear the input and emit unselected, if false, the value will not be cleared (usefull for suggesting values on a free text search) | `boolean` | `true` |\n| `cssClasses` | -- | The class names, which should be set on the rendered html elements | `{ wrapper: string; input: string; suggestions: string; suggestion: string; active: string; }` | `{ wrapper: \"\", input: \"\", suggestions: \"suggestions\", suggestion: \"suggestion\", active: \"active\" }` |\n| `disabled` | `disabled` | Enable/Disable the input field | `boolean` | `false` |\n| `inputId` | `input-id` | id of the input field | `string` | `\"\"` |\n| `inputmode` | `inputmode` | A hint to the browser for which keyboard to display. Possible values: `\"none\"`, `\"text\"`, `\"tel\"`, `\"url\"`, `\"email\"`, `\"numeric\"`, `\"decimal\"`, and `\"search\"`. | `\"decimal\" \\| \"email\" \\| \"none\" \\| \"numeric\" \\| \"search\" \\| \"tel\" \\| \"text\" \\| \"url\"` | `undefined` |\n| `maxSuggestions` | `max-suggestions` | The maximally shown suggestions in the list | `number` | `5` |\n| `minInput` | `min-input` | The minimum input size for generating suggestions | `number` | `0` |\n| `placeholder` | `placeholder` | The placeholder for the input field | `string` | `\"\"` |\n| `required` | `required` | Form validation: is the form input required | `boolean` | `false` |\n| `suggestionGenerator` | -- | Async suggestion generator: `text` is the displayed for users in the form after selection (if no `suggesion` also as suggesion) `value` is the actual value of the form field optional `suggesion` if the autocomplete suggestion item should be formatted differently than `text` | `(text: string) =\u003e Promise\u003c{ text: string; value: string; suggestion?: string; }[]\u003e` | `undefined` |\n| `text` | `text` | The text is displayed by the form field for users | `string` | `\"\"` |\n| `value` | `value` | The actual value of the form field | `string` | `\"\"` |\n| `emptySuggestionTime` | `empty-suggestion-time` | Milliseconds before diplaying autocomplete, even if it's empty or nothing is type in the input. It allow to inspire users for example. Use -1 to disable it. | `number` | `-1` |\n\n\n## Events\n\n| Event | Description | Type |\n| ------------ | -------------------------------------------------- | ------------------ |\n| `selected` | Emitted when an item from suggestions was selected | `CustomEvent\u003cany\u003e` |\n| `unselected` | Emitted when item was cleared/unselected | `CustomEvent\u003cany\u003e` |\n\n\n## Methods\n\n### `clear() =\u003e Promise\u003cvoid\u003e`\n\nClears the form field (suggestions and selection)\n\n#### Returns\n\nType: `Promise\u003cvoid\u003e`\n\n\n\n### `getText() =\u003e Promise\u003cstring\u003e`\n\nReturns the `text` of the selected item\n\n#### Returns\n\nType: `Promise\u003cstring\u003e`\n\n\n\n### `getValue() =\u003e Promise\u003cstring\u003e`\n\nReturns the `value` of the selected item\n\n#### Returns\n\nType: `Promise\u003cstring\u003e`\n\n\n# Developer \n\n```\nnpm i install dependencies\nnpm start start local development \nnpm run build build component for production\nnpm test run e2e tests\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanhuber%2Fweb-complete","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstefanhuber%2Fweb-complete","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstefanhuber%2Fweb-complete/lists"}