2

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/

4

1 回答 1

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
于 2016-04-04T06:30:22.790 回答