Create a tag picker like StackOverflow

Tag Picker

Auto-complete like a boss!

See the JSFiddle for an example of the CSS, JavaScript and HTML you need to make it work.

The only dependency is Ramda to give the JavaScript code a more functional flavor.

You may see $ and think that jQuery is a dependency, but I can assure you that all DOM operations are native:

  const $ = document.querySelectorAll.bind(document);

I decided to use DocumentFragment objects to attach raw elements to the DOM. With such a small amount of data here, it is not necessary, but depending on how big your data set is, it could be crucial later.

Note: I only tested this in JSFiddle in the Chrome browser. Use at your own peril! I did include a commented out MIT license in the JavaScript, so use or modify however you like.

If you found this article to be helpful, then you should subscribe here.

Subscribe to our mailing list

* indicates required