最近工作中由于需求使用到了Bootstrap-tagsinput标系统，我的需求是：
1）能够从后台数据库获取标签信息展示到前端页面；
2）能够实现输入标签添加到后台，并ajax刷新页面；
3）能够实现点击删除变迁按钮，到后台进行逻辑删除，并ajax刷新页面；
但是网上大部分资料都是只展示标签，于是就自己查看官方文档，花了两天时间终于能够实现。
目前能够实现的功能
1）标签动态添加，添加完点击确定，自动刷新页面，更新到已有标签。
2）标签动态删除，点击x标识，会减去相应标签括号后面的积分1，当积分为0或者0以下时，不再显示标签。（删除是逻辑删除，后台数据库isdelete标识，显示使用条件查询）
先上一个展示效果：
1）后台数据库展示到前端页面：
<script>
// 预加载，
var citynames = new Bloodhound({
datumTokenizer: Bloodhound.tokenizers.obj.whitespace('tag'),
queryTokenizer: Bloodhound.tokenizers.whitespace,
prefetch: {
url: 'assets/citynames.json', // 可以动态请求需要预加载的数据
filter: function(tags) {return tags} }
}); // 展示标签
citynames.initialize();
var elt = $('#results_tag'); //通过id获取标签对象
elt.tagsinput({
itemValue: 'value', // 展示标签必须有的字段
itemText: 'text', // 展示标签必须有的字段
typeaheadjs: {
name: 'citynames',
displayKey: 'tag',
valueKey: 'tag',
source:
$.get("/person/tag/?p="+{{ r.uuid }},function (data) { // 展示标签的数据源，可以通过ajax动态加载
if (data){ results_json = jQuery.parseJSON(data.results_tag); num = results_json.length;
for (var i=; i<num; i++)
{
elt.tagsinput('add', {"value":results_json[i].tag_id, "text":results_json[i].tag +'('+results_json[i].probability +')', "continent": "Tag"});
}
} //if
}) //ajax
}
}); // 新增标签
$('input[data-role="tagsinput"]').tagsinput('refresh',{ // 新增标签input
typeaheadjs: {
name: 'citynames',
displayKey: 'tag',
valueKey: 'tag',
cancelConfirmKeysOnEmpty: true,
source:citynames.ttAdapter()
}
});
$('button[data-loading-text="Saving..."]').click(function () { // 新增标签按钮和ajax函数
var tag = $('#tags').val();
params = {'tag':tag,'person_id':{{ r.uuid }}};
$.post("/person/add_tag/", params,function (data) { if (data.res == ){
location.reload()
} //if
}); // post
}); // click // 删除标签
elt.on('beforeItemRemove', function(event) {
var tag = event.item;
// Do some processing here
var tag_id = tag.value;
console.log(tag_id);
if (!event.options || !event.options.preventPost) {
params = {'tag_id':tag_id}
$.post('/person/remove_tag/', params, function(response) {
if (response.res == ){
location.reload() // 刷新页面
}
});
}
}); </script>
①展示标签可以先获取input标签对象
var el = $('#id')这种方式去获取input标签对象，然后对input标签对象进行操作。
②新增标签就不能通过上面那种方式获取input标签对象去操作，这是问题就来了，如果直接使用以下代码，会和展示标签重合，形成Input框内嵌input框
$("input").tagsinput('items')这种效果就不是我们想要的了..
.
既不能通过赋值对象的方法去获取新增input标签，又不能直接使用input标签框获取，可把我急死了...搜寻许久，终于找到了办法，
可以给input标签赋值一个属性：data-role="tagsinput"，然后指定获取标签的时候可以这样：
$("input[data-role='tagsinput']").tagsinput('items')这样就完美解决啦~
ajax视图函数：
@login_required(login_url='/login/')
def get_person_tag(request):
"""在tag_person表取出标签"""
id = request.GET.get('p')
(results_tag, count_tag) = getPersonTags(int(id))
print('【查询到已有标签】：',results_tag)
results_tag = json.dumps(results_tag) # 将获取到的数据转换为json数据
return JsonResponse({'results_tag':results_tag})
查询数据库：
def getPersonTags(person_id):
"""获取tag_person表中tag,tag_id,probability(分数)"""
conn = connectDB()
with conn.cursor() as cursor:
sql = "select distinct tag,ROUND(sum(probability),2) as probability,tag_id from tag_person WHERE person_id = '%s' and probability > 0" % person_id
sql = sql + " GROUP BY tag DESC"
count = cursor.execute(sql)
results = cursor.fetchall()
cursor.close()
conn.close()
return results, count
最终还是建议多看官方文档...
有什么不懂得可以多交流...
原文：https://blog.csdn.net/weixin_40475396/article/details/79046670
版权声明：本文为博主原创文章，转载请附上博文链接！