如果自动完成 Bootstrap 标签输入预输入中不存在，如何创建新标签

Question

HTML:

<div class="category-container">
    <input type="text" id="category" />
    <div id='tes'>Check Value
    </div>
</div>

JS:

var data = [{"id":1,"city":"Jakarta"},{"id":2,"city":"Washington"},{"id":3,"city":"Amsterdam"},{"id":4,"city":"Sydney"}]
var citynames = new Bloodhound({
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('city'),
    queryTokenizer: Bloodhound.tokenizers.whitespace,
    local: $.map(data, function (city) {
        return {
                id: city.id,
            city: city.city
        };
    })
});
citynames.initialize();

$('.category-container > input').tagsinput({
    typeaheadjs: [{
          minLength: 1,
          highlight: true,
    },{
        minlength: 1,
        name: 'citynames',
        displayKey: 'city',
        valueKey: 'city',
        source: citynames.ttAdapter()
    }]
});
$(document).ready(function(){
    $('#tes').click(function(){
        console.log($('#category').val());
    })
})

如果有value（例如Sydney，则输入ID的值，本例为4），如果没有value，则给出输入的字符串

示例：如果我输入 Jakarta 和 Kairo 等新标签，那么输入的值将是 1,Kairo。

如何操作？

这里是fiddlehttps://jsfiddle.net/wug8mnss/

Answer 1

没有内置功能可以做到这一点，但您可以轻松地自己完成，只需重建 tagsinput val() 字符串，并插入现有值的 id 而不是值本身。

$('#tes').click(function(){
   var newValues = [], values = $('#category').val().split(',')
   function getVal(value) {
      for (var i=0; i<data.length; i++) {
        if (data[i].city == value) return data[i].id
      }
      return value
   }
   newValues = values.map(function(value) {
     return getVal(value) 
   }).join(',')
   console.log(newValues)
})

已更新 fiddle -> https://jsfiddle.net/wug8mnss/2/
例如这个控制台输出

1, Kairo, 4

而不是

Jakarta, Kairo, Sydney

如果自动完成 Bootstrap 标签输入预输入中不存在，如何创建新标签

How to create new tags if not present in autocomplete Boostrap tags input typeahead

typeahead.js

bootstrap-tags-input