Edit There already was a pull about that : https://github.com/twitter/bootstrap/pull/2007
You can approach the desired behavior by using a proxy for the typeahead : Demo (jsfiddle)
var $myTextarea = $('#myTextarea');
$('.typeahead').typeahead({
source: source,
updater: function(item) {
$myTextarea.append(item, ' ');
return '';
}
});
I think the updater
method is meant for this kind of thing, you just return what will be displayed.
Or if you really want everything to be in the same input element, you would have to override more methods so that it only matches the currently-typed element : Demo (jsfiddle)
function extractor(query) {
var result = /([^,]+)$/.exec(query);
if(result && result[1])
return result[1].trim();
return '';
}
$('.typeahead').typeahead({
source: source,
updater: function(item) {
return this.$element.val().replace(/[^,]*$/,'')+item+',';
},
matcher: function (item) {
var tquery = extractor(this.query);
if(!tquery) return false;
return ~item.toLowerCase().indexOf(tquery.toLowerCase())
},
highlighter: function (item) {
var query = extractor(this.query).replace(/[\-\[\]{}()*+?.,\\\^$|#\s]/g, '\\$&')
return item.replace(new RegExp('(' + query + ')', 'ig'), function ($1, match) {
return '<strong>' + match + '</strong>'
})
}
});
This one is not idiot proof, because you have to type at the end, after the special character.