Bootstrap 3 + Tagsinput + Typeahead problems

Was integrating tagsinput ( with typeahead on bootstrap 3 and ran into the below issues:

1. Tagsinput did not work very well with twitter’s typeahead.js. So I ended up using Bootstrap 3 Typeahead –

2. Point to note here is the javascript for this has to be in bootstrap 2.3 style.

typeahead: {
source: function(query) {
return $.getJSON(‘/jsonApi?input=’ + query);

3. Next I found out that tagsinput only allows to pass “source” option to typeahead as shown above. I wanted to pass other options like “items”, “sorter”, etc. Tagsinput doesn’t allow this, and without this only the max default 8 items popped out in the typeahead. So I had to look into bootstrap-tagsinput.js source code and found the part where the typeahead instance is being created. I had to make additions as below in the block starting line 248. I commented out the sorter and added other options I needed.

source: function (query, process) {
function processItems(items) {
var texts = [];

for (var i = 0; i < items.length; i++) {
var text = self.options.itemText(items[i]);
map[text] = items[i];
} = {};
var map =,
data = typeahead.source(query);

if ($.isFunction(data.success)) {
// support for Angular promises
} else {
// support for functions and jquery promises
updater: function (text) {
matcher: function (text) {
return (text.toLowerCase().indexOf(this.query.trim().toLowerCase()) !== -1);
sorter: function (texts) {
//return texts.sort();
return texts;
highlighter: function (text) {
var regex = new RegExp( ‘(‘ + this.query + ‘)’, ‘gi’ );
return text.replace( regex, “<strong>$1</strong>” );
items: “all”,
minLength: “3”

4. Now the typeahead dropdown listed all items! And, so the next prob started – the typeahead dropdown was so big and spanned outside the window causing us not to view all entries. So what I needed here is a scrollable dropdown. For this added below css, and not it’s all awesome!

.typeahead {
max-height: 300px;
overflow-y: scroll;


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s