Tags With Typeahead in Bootstrap 3

NixMash Spring Posts now include Tagging with Typeahead support, and all sweetly Bootstrap 3 enhanced.

This is one of those posts that should have a “SOLVED!” at the end of the title. Not a fun venture, but a nice payoff in the end we can all now enjoy.

We're using the Bootstrap Tags Input jQuery Plugin. Clean and Bootstrappy. You'll see on the example page that typeahead is supported and easy to implement, except it wasn't. The Plugin uses Twitter Typeahead and Bloodhound for tokening JSON objects.

Something in the JavaScript mix was playing the role of expired yeast in a bread recipe, so we switched to the Bootstrap 3 Typeahead plugin. It fired-up right away and the crowd went wild…until a tag was selected and the Bootstrap Tags Input plugin displayed it twice! Fortunately we we able to hack the Typeahead Javascript to play nice with the Tags Input plugin. We'll see that in a bit.

For the official record, here are the plugins we're using: the Bootstrap Tags Input Plugin for tags with the Bootstrap 3 Typeahead plugin.

The Input Field

We'll be using a SELECT field as opposed to an INPUT field. We tried both throughout development and testing and chose SELECT for no particular reason.

The JavaScript

Our JavaScript is pretty clean. We load Typeahead and TagInput, then enable the SELECT field and set to retrieve our typeahead data from our PostsRestController.

The JSON

We wanted to send the Tag object as JSON to the client and tokenize it with Bloodhound, but Bloodhound in standalone mode kept spitting out errors we didn't feel like dealing with. So instead of serving up sweet Tag objects from our MVC RestController with TagId and TagValue fields, we're sending a simple string array.

The JSON format we're using is [ “Bash”, “Bootstrap”, “Code”, … ]

Double Display Fix

We were too deep into this particular plugin cocktail to start fresh with other ingredients, so we were determined to fix the hand-off of the selected typeahead value from Bootstrap 3 Typeahead to TagsInput. The Typeahead select function seemed the likely place to focus our efforts, and here is the fix. We changed the original JavaScript from this:

…to the following. Basically we're 1) setting the element displayText from newVal to an empty string, and 2) hiding the element and returning the newVal rather than simply returning this.hide().

Alternative title for this post: JavaScript: Seriously?

Source Code Notes for this Post

All source code discussed in this post can be found in my NixMash Spring GitHub repo and viewed online here.

Posted July 01, 2016 03:42 PM EDT

More Like This Post