Search code examples
jquerytwitter-bootstrapbootstrap-typeahead

Mention.js conflicts with typeahead


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);           
    }

});


Solution

  • 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.