Bootstrap-tagsinput标系统使用心得

  <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=0; 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 == 1){
                    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 == 1){
                      location.reload() // 刷新页面
                  }
              });
           }
    });
     
        </script>

var el = $('#id')

$("input").tagsinput('items')

$("input[data-role='tagsinput']").tagsinput('items')

   @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