Bootstrap tag typeahead input not populating menu

Question

I am using bootstrap tags (https://github.com/bootstrap-tagsinput/bootstrap-tagsinput) for populating some of the tags. I am using jQuery 3 and Bootstrap 3. Below is the code snippet. It is fetching data from server but it is not processing. Could you please let me know how to fix this?

I have included https://github.com/twitter/typeahead.js and https://github.com/bootstrap-tagsinput/bootstrap-tagsinput and corresponding CSS

function attachOrgRoleTypeAhead(){
    console.log('attachOrgRoleTypeAhead called');
    $('.roletag').tagsinput({
        tagClass:'form-control input-sm',
        //itemValue: 'rolename',
        //itemText: 'rolename',
        //display: 'rolename',
        allowDuplicates: false,
        freeInput: false,
        typeaheadjs: {
            displayKey: 'text',
            afterSelect: function(val) { this.$element.val(""); },
            source: function (query, process,asynchProcess){
                var typeaheadData = {};
                var rolesdata = {};
                var $items = new Array;
                rolesdata.orgid= $('#orgidselector').find("option:selected").val();
                rolesdata.query=query;
                $.ajax({
                    url: ctx+'organization/findRoles.json',
                    dataType: "json",
                    type: "POST",
                    data: JSON.stringify(rolesdata),
                    beforeSend: function(xhr) {
                        xhr.setRequestHeader("Accept", "application/json");
                        xhr.setRequestHeader("Content-Type", "application/json");
                    },
                    success: function(data, textStatus, jqXHR)
                    {
                        $.map(data, function(data){
                            var group;
                            group = {
                                itemValue: data.id,
                                itemText: data.rolename,  
                                level: data.rolename,
                                toString: function () {
                                    return JSON.stringify(this);
                                },
                                toLowerCase: function () {
                                    return this.name.toLowerCase();
                                },
                                indexOf: function (string) {
                                    return String.prototype.indexOf.apply(this.name, arguments);
                                },
                                replace: function (string) {
                                    var value = '';
                                    value +=  this.name;
                                    if(typeof(this.level) != 'undefined') {
                                        value += ' <span class="pull-right muted">';
                                        value += this.level;
                                        value += '</span>';
                                    }
                                    return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1.5em;">' + value + '</div>', arguments);
                                }
                            };
                            $items.push(group);
                        });
                        process($items);
                        asynchProcess($items);

                    },
                    error: function (jqXHR, textStatus, errorThrown)
                    {
                        alert("findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown);
                        console.log( "findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown);
                    }
                });
            }
        }
    });
}

Answer 1

The issue was with overriding methods like toString(),replace() and data elemenet assignment.

function attachOrgRoleTypeAhead(){
        console.log('attachOrgRoleTypeAhead called');
        $('.roletag').tagsinput({
            //tagClass:'form-control input-sm',
            itemValue: 'id',
            itemText: 'name',
            //display: 'rolename',
            allowDuplicates: false,
            freeInput: false,
            typeaheadjs: {
                displayKey: 'text',
                afterSelect: function(val) { this.$element.val(""); },
                source: function (query, process,asynchProcess){
                    var typeaheadData = {};
                    var rolesdata = {};
                    var $items = new Array;
                    rolesdata.orgid= $('#orgidselector').find("option:selected").val();
                    rolesdata.query=query;
                    $.ajax({
                        url: ctx+'organization/findRoles.json',
                        dataType: "json",
                        type: "POST",
                        data: JSON.stringify(rolesdata),
                        beforeSend: function(xhr) {
                            xhr.setRequestHeader("Accept", "application/json");
                            xhr.setRequestHeader("Content-Type", "application/json");
                        },
                        success: function(data, textStatus, jqXHR)
                        {
                            $.map(data, function(data){
                                var group;
                                group = {
                                    id: data.id,
                                    name: data.rolename,  
                                    level: data.rolename,
                                    text: data.rolename,
                                    toString: function () {
                                        console.log("group value :"+JSON.stringify(this));
                                        return JSON.stringify(this);
                                    },
                                    toLowerCase: function () {
                                        return this.name.toLowerCase();
                                    },
                                    indexOf: function (string) {
                                        console.log("group indexof :"+string);
                                        return String.prototype.indexOf.apply(this.name, arguments);
                                    },
                                    replace: function (string) {
                                        var value = '';
                                        value +=  this.name;
                                        if(typeof(this.level) != 'undefined') {
                                            value += ' <span class="pull-right muted">';
                                            value += this.level;
                                            value += '</span>';
                                        }
                                        return String.prototype.replace.apply('<div style="padding: 10px; font-size: 1.5em;">' + value + '</div>', arguments);
                                    }
                                };
                                $items.push(group);
                            });
                            asynchProcess($items);

                        },
                        error: function (jqXHR, textStatus, errorThrown)
                        {
                            alert("findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown);
                            console.log( "findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown);
                        }
                    });
                }
            }
        });

}