如果自动完成引导标签中不存在，如何创建新标签输入预先输入答案

【问题标题】：How to create new tags if not present in autocomplete Boostrap tags input typeahead如果自动完成引导标签中不存在，如何创建新标签输入预先输入
【发布时间】：2016-02-24 08:45:09
【问题描述】：

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

如果值存在（例如Sydney，则给出ID的输入值，在本例中为4），但如果值不存在，则给出输入的字符串。

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

如何做到这一点？

这是小提琴https://jsfiddle.net/wug8mnss/

【问题讨论】：

在下面查看我的答案......

标签： typeahead.js bootstrap-tags-input

【解决方案1】：

没有内置功能可以做到这一点，但您可以轻松地自己完成，只需重建标签输入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)
})

更新小提琴 -> https://jsfiddle.net/wug8mnss/2/
以这个控制台为例

1, Kairo, 4

而不是

Jakarta, Kairo, Sydney

【讨论】：