A complete tag input for use in JavaScript web applications provided as a web component. Take a look at a working Demo.
Include the web components polyfill from webcomponents.org and include the compiled version of the rebel-tag-input.js file.
<script src="https://github.com/RevillWeb/rebel-tag-input/raw/master/webcomponents.min.js"></script>
<script src="https://github.com/RevillWeb/rebel-tag-input/raw/master/rebel-tag-input.js"></script>Add the custom element somewhere in your app:
<rbl-tag-input lowercase="false" uppercase="false" duplicates="false" id="tagElement"></rbl-tag-input>The component provides a few attributes and methods so you are able to tailing its functionality to suit your application.
| Attribute Name | Required | Type | Example | Comments |
|---|---|---|---|---|
| lowercase | No | String | true, false | If the component should convert all tags to lowercase |
| uppercase | No | String | true, false | If the component should convert all tags to uppercase |
| duplicates | No | String | true, false | If the component should allow duplicate tags |
Get the current value of the tag input.
var $element = document.querySelector("#tagElement");
console.log($element.value); //Web Components, JavaScript, AngularJSClear the input of any tags.
var $element = document.querySelector("#tagElement");
$element.clear();