@zemke/tagbox v1.1.1

Tagbox

Zero dependency Web Component single-line input field (no contenteditable) with ability to enter tags.

JSFiddle DEMO

• Navigate suggestions with tab, shift+tab and arrow keys ↑↓→←
• Works with copy-pasted text
• Responsive all the way
• Customizable in looks and the way it works
• Plain old HTML and JavaScript, no magic
• Data backed by sane input and select elements
• Works well with React, Angular, etc.
• Battle-proven in production environments

npm i @zemke/tagbox

Usage

<script src="js.js"></script>

<zemke-tagbox>
  <input type="text" name="message">
  <select multiple name="tags">
    <option value="1">James</option>
    <option value="2">Robert</option>
    <option value="3">John</option>
    <option value="4">Michael</option>
    <option value="5">David</option>
    <option value="6">William</option>
  </select>
</zemke-tagbox>

Options

search - start (default), infix, levenshtein \ How to filter the suggestions. Match from start, anywhere (infix) or fuzzy matching using Levenshtein algorithm. When using Levenshtein you can provide the match boundary followed by a comma. I.e. search="levenshtein,60" filter by string similarity at least 60% (default is 80%).

ci \ Add this value to make the search case-insensitive.

nothing \ The message to show when no match has been found. Default is "Nothing found."

length \ The number of suggestions to show. Default is 4.

Here's an example of all attributes in use:

<zemke-tagbox length="6"
              ci
              nothing="No such entry."
              search="infix">
...

Styling

There are three parts of this Web Component that can be styled using CSS:

• tag
• input
• dropdown-container
• dropdown-item

Use CSS's ::part pseudo-element i.e. zemke-tagbox::part(tag).

The demo includes a individually styled version of the Web Component.

Caveats

Attributes

The input field that the user types in is in a Shadow DOM. Therefore you can't add attributes it like you're used to. At the end of the day zemke-tagbox is not an input field. You could do so if you're willing to do it with JavaScript like this:

document.querySelector('zemke-tagbox')
  .chatInputEl.setAttribute('placeholder', "Enter your message here")

Styling

If you have CSS rules for input fields they won't apply to this element. You'll have to hand-write CSS to copy your rules over to zemke-tagbox element.

If you're using Bootstrap with SCSS this could be as easy as:

zemke-tagbox::part(input) {
  @extend .form-control;
}       

Bonus tip if you're using it within a Bootstrap .input-group I found this to work:

.input-group zemke-tagbox::part(input) {
  height: inherit;
  box-sizing: border-box;
}

.input-group zemke-tagbox {
  flex: 1 1 0%;
  box-sizing: border-box;
  position: relative;
}

Box Model change

If marginLeft, borderLeftWidth, borderRightWidth, paddingLeft, paddingRight or width change without the input element itself changing its dimensions, the tags might be off.