If there is a page which has both mentionjs search field as well as bootstap typeahead in use, the typeahead stops working..
AS soon as I comment mention statement, typeahead starts working. Any pointers ?
Mention.js => Link
$(selector).mention({
delimiter: '#',
list: []
});
Bootstrap v2.3.2
$this.typeahead({
source: function(query, typeahead){
$.ajax({
url: url,
type: "GET",
data: "",
dataType: "JSON",
async: false,
success: function(data){
var hashList = new Array;
$.map(data, function(data){
var group;
group = {
val_id: data.id,
val: data.valName,
toString: function () {
return JSON.stringify(this);
},
toLowerCase: function () {
return this.drug.toLowerCase();
},
indexOf: function (string) {
return String.prototype.indexOf.apply(this.drug, arguments);
},
replace: function (string) {
return String.prototype.replace.apply(this.drug, arguments);
}
};
hashList.push(group);
});
typeahead(hashList);
}
});
},
property: 'val',
items:4,
updater: function (item) {
var item = JSON.parse(item);
console.log(item.id);
}
});
I had to copy bootstrap typeahead into another file and rename all occurences of $.fn.typeahead with $.fn.renamedtypeahed, later importing both of them
Followed by renaming all occurence of $.fn.typeahead to $.fn.renamedtypeahead in mention.js plugin. there was 1 more place _this.typeahead where same rename was required.
Now they dont conflict with each other.. I dont know if there was any other way to solve it quickly.