Check the CodePen examples here.
Simple and extremely easy tags input for anything that runs on browser 🌐 🚀
Installation with CDN
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.css">
...
<script src="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.js"></script>Quick start html example
<!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">
<!--Simple tags input style-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.css">
</head>
<body>
<div>
<ul id="tagsList"></ul>
<input
type="text"
id="tagsInput"
spellcheck="false"
/>
</div>
<!--Simple tags input plugin-->
<script src="https://cdn.jsdelivr.net/gh/rk4bir/simple-tags-input@latest/src/simple-tag-input.min.js"></script>
<!--Simple tags input implementation-->
<script>
let options = { inputEl: "tagsInput", listEl: "tagsList"};
const tagsInput = new simpleTagsInput(options);
</script>
</body>
</html>
Check the codepen example.
<!--HTML code-->
<div>
<ul id="tagsList"></ul>
<input
type="text"
class="form-control"
id="tagsInput"
spellcheck="false"
/>
</div>/* JavaScript code */
let options = {
inputEl: "tagsInput",
listEl: "tagsList",
};
var tagsInput = new simpleTagsInput(options);
// get the tags list/array [tag1, tag2, ...]
tagsInput.getTags();Demo
Basic usecase demo
Check the codepen example.
<!--HTML code-->
<div>
<ul id="tagsList2"></ul>
<input
type="text"
class="form-control"
id="tagsInput2"
spellcheck="false"
/>
</div>/* JavaScript code */
let options = {
inputEl: "tagsInput2",
listEl: "tagsList2",
autocompleteSearchList: [
"Afganistan",
"Bangladesh",
"China",
"India",
"Pakistan",
"Sri Lanka",
"United States",
"United Kingdom",
"Vietnam",
"Zimbabwe"
]
};
var tagsInputWithSearch = new simpleTagsInput(options);
// get the tags list/array [tag1, tag2, ...]
tagsInput.getTags();Demo
Autocomplete usecase demo
Thanks to these wonderful people for contributing to this project:
