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

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

实施例：如果我输入Jakarta和新标签如Kairo，则输入的值将为1，Kairo。

怎么做？

这是小提琴https://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)
})

更新小提琴 - ＆gt;的 https://jsfiddle.net/wug8mnss/2/
例如，这个控制台

1, Kairo, 4

而不是

Jakarta, Kairo, Sydney

如果自动完成Boostrap标签中不存在，则如何创建新标签输入typeahead

1 个答案: