Bootstrap标签提前输入未使用jQuery Ajax填充菜单 [英] Bootstrap tag typeahead input not populating menu with jQuery ajax

问题描述

我正在使用引导程序标签( https://github.com/bootstrap-tagsinput/bootstrap -tagsinput )填充一些标签.我正在使用jQuery 3和Bootstrap3.下面是代码段.它正在从服务器获取数据，但未处理.您能告诉我如何解决此问题吗?

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?

我包含了 https://github.com/twitter/typeahead.js 和 https://github.com/bootstrap-tagsinput/bootstrap-tagsinput 和相应的CSS

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

推荐答案

问题在于诸如toString()，replace()和数据元素分配之类的覆盖方法.

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

}

这篇关于Bootstrap标签提前输入未使用jQuery Ajax填充菜单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！