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.
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.
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
…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().