https://github.com/diversen/auto-complete-tags

Custom input element for auto completing tags
https://github.com/diversen/auto-complete-tags

auto-complete auto-complete-tags javascript

Last synced: 7 days ago
JSON representation

Custom input element for auto completing tags

• Host: GitHub
• URL: https://github.com/diversen/auto-complete-tags
• Owner: diversen
• Created: 2021-11-06T11:22:27.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2021-11-07T14:08:45.000Z (about 3 years ago)
• Last Synced: 2024-12-09T12:19:56.673Z (13 days ago)
• Topics: auto-complete, auto-complete-tags, javascript
• Language: JavaScript
• Homepage:
• Size: 22.5 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Auto complete tags

A custom web component that will fetch `tag` suggestions from an endpoint: 

~~~html

    

    

    

    import {AutoCompleteTags} from 'https://unpkg.com/[email protected]/index.js';

    customElements.define('auto-complete-tags', AutoCompleteTags);

~~~

## Options

`data-wait` specifies how many milli-seconds to wait before fetching data from the endpoint

`data-url` is the endpoint. This should return a JSON array which will build the dropdown selection list.

Your current keyboard typings will be added to the `data-url` and sent to the endpoint

`data-complete-keys` is the keys that will auto-complete the selection. `ArrowUp` and `ArrowDown` are used for moving up and down.

## Styling

It is an open element, not using shadow-DOM, so you can style it from the outside. Just use a stylesheet. 

## Demo

See: [index.html](index.html)

You can see the demo here [https://diversen.github.io/auto-complete-tags/](https://diversen.github.io/auto-complete-tags/)

## License

MIT © [Dennis Iversen](https://github.com/diversen)