Bootstrap 3 + Tagsinput + Typeahead problems

Was integrating tagsinput (https://github.com/TimSchlechter/bootstrap-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 – https://github.com/bassjobsen/Bootstrap-3-Typeahead

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

$(‘#elementid’).tagsinput({
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.

self.$input.typeahead({
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];
texts.push(text);
}
process(texts);
}

this.map = {};
var map = this.map,
data = typeahead.source(query);

if ($.isFunction(data.success)) {
// support for Angular promises
data.success(processItems);
} else {
// support for functions and jquery promises
$.when(data)
.then(processItems);
}
},
updater: function (text) {
self.add(this.map[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;
}

Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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