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>
<link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style">
</head>
<script type="module">
import Input2Tags from "https://unpkg.com/input2tags@latest?module"
( code will go here )
</script><div>
<ul id="tagsList"></ul>
<input type="text" id="newTag" spellcheck="false" placeholder="Enter a tag" />
</div> const inputEl = document.getElementById('newTag');
const inputTags = new Input2Tags(inputEl);Quick example html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap 5 not used by Input Tags -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<!-- Only CSS used by Input2Tags -->
<link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style.css">
</head>
<body>
<div class="container mt-5">
<h1 class="text-center mb-4">Tags Input</h1>
<div class="mb-3">
<p class="mb-2">Tag List:</p>
<!-- specify the ul LIST element to show the tags -->
<ul id="myTagList"><li><strong>List:</strong></li></ul>
<!-- include the input box to input the tags -->
<p><i>Type something and press Enter</i></p>
<input type="text" id="newTag" class="form-control mt-2" spellcheck="false" placeholder="Enter a tag" />
</div>
<div class="mb-3">
<p class="mb-2">List results: <strong><span id="tagsData"></span></strong></p>
<div class="mt-5 d-grid gap-2 d-md-flex justify-content-md-start">
<button class="btn btn-secondary ms-md-2" onClick="btnAddTag('hello')">Add Tag 'hello'</button>
</div>
</div>
</div>
<!--Simple tags input implementation-->
<script type="module">
import Input2Tags from "https://unpkg.com/input2tags@latest"
const inputEl = document.getElementById('newTag');
const input2Tags = new Input2Tags(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 something
setTimeout( ()=>input2Tags.addTag('Auto-Add'), 100)
// export module functions for DOM
window.btnAddTag = (tag) => input2Tags.addTag(tag);
</script>
</body>
</html> Check the CodePen.io example.
<head>
<link rel="stylesheet" href="https://unpkg.com/input2tags@latest/style">
</head>
<script type="module">
import Input2Tags from "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>
<input type="text" id="newTag" spellcheck="false" placeholder="Enter a tag" />
<button onClick="btnAddTag('hello')">Add Tag 'hello'</button>
</div> const inputEl = document.getElementById('newTag');
const inputTags = new Input2Tags(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 needed
window.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)
const inputEl = document.getElementById('newTag');
const inputTags = new Input2Tags(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.
<button onClick="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.