Bootstrap标签预先输入不使用jQuery ajax填充菜单

我使用bootstrap标签（ https://github.com/bootstrap-tagsinput/bootstrap-tagsinput ）来填充一些标签。 我正在使用jQuery 3和Bootstrap 3.下面是代码片段。 它从服务器获取数据但不处理。 你能告诉我怎么解决这个问题吗？

我已经包含了https://github.com/twitter/typeahead.js和https://github.com/bootstrap-tagsinput/bootstrap-tagsinput和相应的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 += ' '; value += this.level; value += ''; } return String.prototype.replace.apply('
' + value + '
', 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

问题在于重写方法，如toString（），replace（）和数据elemenet赋值。

 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 += ' '; value += this.level; value += ''; } return String.prototype.replace.apply('
' + value + '
', arguments); } }; $items.push(group); }); asynchProcess($items); }, error: function (jqXHR, textStatus, errorThrown) { alert("findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown); console.log( "findRoles error :"+jqXHR+":"+textStatus+":"+errorThrown); } }); } } }); }