Check the CodePen.io basic example; autocomplete example.
Project objective: simple but powerful vanilla ES6 javascript (code: 350 lines) input tag generator for any input fields; with auto-completion lists.
Based off the inspiration work of github.com/rk4bir/simple-tags-input; using his idea and CSS but then rewritten for ES6 and more features. Can record special keys (Meta, Alt, Tab, MouseLeft, VolumeUp, etc) as key presses.
This project is mobile-device friendly.
Video illustrations:
Only required tags are inputId
- allowDelete: allow the [x] deleting of tags (default true)
- allowDuplicates: allow duplicate tags (default false)
- allowSpaces: allow spaces in tags (default false)
- allowCustomKeys: enables special character handling (default false)
- autocomplete: array of auto-complete options
- initialTags: array of initial tags to display
- targetEl: target list element (if UL) or parent for the created list element
- onAdd: a function called before adding the tag text (returns text or modified version)
- onDelete: a function called before deleting a tag (returns true if allowed, false otherwise)
- onInput: a function called after new user input received
- onChange: a function called after change to tags (new tag added, re-arranged, deleted tag)
With a valid Input2Tags() instance you have these methods:
- getTags(): get the list of tags created
- setTags([]): set the list of tags
- addTag(tag): add a new tag to input tags instance
- deleteTag(index): remove a tag, the index of it's placement
- showAutocomplete(query): showes autoComplete with matches for the query
- hideAutocomplete()
- destroy(): remove the instance
There are 3 steps to using it
- Include the CSS & JS files. 2a. Have an input box (INPUT) that it will use. 2b. If no tag list (UL) is given, it will create one above the input box; if you want to place it differently, create your own and pass it in.
- Run the function: const inputTags = new Input2Tags(inputEl, { ...options });
That's it!
Check the CodePen.io example.
<head><linkrel="stylesheet" href="https://unpkg.com/input2tags@latest/style"></head><scripttype="module">importInput2Tagsfrom"https://unpkg.com/input2tags@latest?module"(codewillgohere)</script><div><ulid="tagsList"></ul><inputtype="text" id="newTag" spellcheck="false" placeholder="Enter a tag" /></div>constinputEl=document.getElementById('newTag');constinputTags=newInput2Tags(inputEl);Quick example html
<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UA-Compatible" content="IE=edge"><metaname="viewport" content="width=device-width, initial-scale=1.0"><!-- Bootstrap 5 not used by Input Tags --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous"><!-- Only CSS used by Input2Tags --><linkrel="stylesheet" href="https://unpkg.com/input2tags@latest/style.css"></head><body><divclass="container mt-5"><h1class="text-center mb-4">Tags Input</h1><divclass="mb-3"><pclass="mb-2">Tag List:</p><!-- specify the ul LIST element to show the tags --><ulid="myTagList"><li><strong>List:</strong></li></ul><!-- include the input box to input the tags --><p><i>Type something and press Enter</i></p><inputtype="text" id="newTag" class="form-control mt-2" spellcheck="false" placeholder="Enter a tag" /></div><divclass="mb-3"><pclass="mb-2">List results: <strong><spanid="tagsData"></span></strong></p><divclass="mt-5 d-grid gap-2 d-md-flex justify-content-md-start"><buttonclass="btn btn-secondary ms-md-2" onClick="btnAddTag('hello')">Add Tag 'hello'</button></div></div></div><!--Simple tags input implementation--><scripttype="module">importInput2Tagsfrom"https://unpkg.com/input2tags@latest"constinputEl=document.getElementById('newTag');constinput2Tags=newInput2Tags(inputEl,{autocomplete: ['apple','banana','cherry'],// initialTags: ['one','two','three'], // pre-populate (1)targetEl: document.getElementById('myTagList'),// pre-populate (2)onChange: (tags)=>document.getElementById('tagsData').innerHTML=tags?.join(',')||''});// show initial tags by adding somethingsetTimeout(()=>input2Tags.addTag('Auto-Add'),100)// export module functions for DOMwindow.btnAddTag=(tag)=>input2Tags.addTag(tag);</script></body></html>Check the CodePen.io example.
<head><linkrel="stylesheet" href="https://unpkg.com/input2tags@latest/style"></head><scripttype="module">importInput2Tagsfrom"https://unpkg.com/input2tags@latest?module"</script>Really just having an input box to enter tags is all that is needed. The package can use an existing list (UL) otherwise it will create one and pre-pend above the INPUT box.
<div><inputtype="text" id="newTag" spellcheck="false" placeholder="Enter a tag" /><buttononClick="btnAddTag('hello')">Add Tag 'hello'</button></div>constinputEl=document.getElementById('newTag');constinputTags=newInput2Tags(inputEl,{autocomplete: ['apple','banana','cherry'],initialTags: ['one','two','three'],// pre-populate (1)// targetEl: document.getElementById('myTagList'), // pre-populate (2)// onChange: (tags) => document.getElementById('tagsData').innerHTML = tags?.join(',') || ''});// export module functions for DOM access if neededwindow.inputTags=inputTags;You can use the 4 hooks to limit characters allow in inputs, prevent certain tags from being created, or others from being deleted (with these hooks: onInput, onAdd, onDelete)
constinputEl=document.getElementById('newTag');constinputTags=newInput2Tags(inputEl,{targetEl: document.getElementById('myList'),autocomplete: ['apple','banana','cherry','pear','pineapple'],// allowCustomKeys: true,// onInput: (value,e) => customKeyHandling(value,e),
onInput,
onAdd,
onDelete,onChange: (tags)=>document.getElementById('tagsOutput').value=tags?.join(',')||'',});- AutoComplete: Triggering display of autocomplete: see example/advanced.html "Show AutoComplete" button.
<buttononClick="showList('apple')">Show AutoComplete List</button>window.showList=(search)=>inputTags.showAutocomplete(search);If you modify the javascript in src/inputtags.js, you can build it with npm run build for distribution.
Before forking and spreading another version, please contact the author with a PR if you have improvements you would like. I'd be happy to integrate improvements.