Check the CodePen.io basic example; autocomplete example.
Project objective: simple but powerful vanilla ES6 javascript (code: 250 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, etc) as key presses.
(Go to my github repo to see the demos, this readme does't show them on other locations)
Only required tags are inputId and listId
- tags: can pre-populate tags (Array)
- inputId: element-id of INPUT element to use (String, required)
- listId: element-id of UL list element to use (String, required)
- outputId: element-id of where to store the generated tag list (ex. hidden input) (String)
- afterUpdate: function to call after change to tags (Function)
- unique: require tags to be unique (Boolean, default: false)
- delimiter: normally comma to separate items but alternative possible (Char, default ',')
- drag: allow re-arranging the tags (Boolean, default false)
- specialKeys: enable tracking special keys (Boolean, default false)
- mouse: allow capture of a mouse click as tag (Boolean, default false)
- autocompleteList: autocomplete list suggestions (Array)
With a valid InputTags() instance you have these methods:
- getTags(): get the list of tags created (these will be reflected in outputId element if linked)
- addTag(tag): add a new tag to input tags instance
- removeTag(elementID): remove a tag, using it's unique id
- toggleAutoComplete(query): toggle showing autoComplete with matches for the query
- destroy(): remove the instance There are a few other methods but they a better only used internally.
There are 3 steps to using it
- Include the CSS & JS files (importing it into a script type=module)
- Have an empty list (UL) and an input box (INPUT)
- Run the function: const inputTags = new InputTags({ inputId: "tagsInput", listId: "tagsList" });
That's it!
Check the CodePen.io example.
<head>
<link rel="stylesheet" href="https://unpkg.com/js-input-tags@latest/style.css">
</head>
<script type="module">
import InputTags from "https://unpkg.com/js-input-tags@latest"
</script><div>
<ul id="tagsList"></ul>
<input type="text" id="tagsInput" spellcheck="false" placeholder="Enter a tag" />
</div> const inputTags = new InputTags({ inputId: "tagsInput", listId: "tagsList" });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 InputTags -->
<link rel="stylesheet" href="https://unpkg.com/js-input-tags@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="tagsList"><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="tagsInput" 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 InputTags from "https://unpkg.com/js-input-tags@latest"
function displayTags( _tags ){
console.log( `[displayTags] called, with tags: ${_tags}` );
document.querySelector('#tagsData').innerHTML = _tags;
}
function btnAddTag( _tag ){
inputTags.addTag(_tag);
}
const inputTags = new InputTags({
inputId: "tagsInput", listId: "tagsList",
unique: true, afterUpdate: displayTags,
});
// export module functions for DOM
window.btnAddTag = btnAddTag;
</script>
</body>
</html> Check the CodePen.io example.
<head>
<link rel="stylesheet" href="https://unpkg.com/js-input-tags@latest/style.css">
</head>
<script type="module">
import InputTags from "https://unpkg.com/js-input-tags@latest"
</script><div>
<ul id="tagsList"></ul>
<input type="text" id="tagsInput" spellcheck="false" placeholder="Enter a tag" />
<button onClick="btnAddTag('hello')">Add Tag 'hello'</button>
</div> const inputTags = new InputTags({
inputId: "tagsInput", listId: "tagsList",
tags: ['default','tags'], specialKeys: true, delimiter: ';', afterUpdate: displayTags,
autocompleteList: [ "Canada", "India", "Sri Lanka", "United States", "United 'UK' Kingdom", "Vietnam", "Zimbabwe"]
});
function displayTags( _tags ){
console.log( `[displayTags] called, with tags: ${_tags}` );
}
function btnAddTag( _tag ){
myTags.addTag(_tag);
}
// export module functions for DOM
window.btnAddTag = btnAddTag;afterUpdate: You can postprocess after changes and change how it saves to output field, ex.
const myTags = new InputTags({
inputId: "tagsInput", listId: "tagsList", outputId: "tagsOutput",
afterUpdate: function(outputVal){ let tags = outputVal.split(this.delimiter); tags.unshift("Prepend"); this.writeTagOutput(tags); }
});- AutoComplete: Triggering display of autocomplete: see example/advanced.html "Show AutoComplete" button.
<button onClick="showList('uni')">Show AutoComplete List</button> function showList( tags ){
myTags.toggleAutoComplete(tags);
}
// show script-module functions in acctual DOM
window.showList = showList;