以编程方式选择带引导程序标签的Bloodhound自动完成标签列表输入

Question

我有一个由Bootstrap Tagsinput驱动的文本输入。目前，该文本输入初始化与在Typeahead自动完成使用标签的单个列表：

$('.tagsInput').tagsinput({ 
    maxChars: 25, 
    maxTags: 5, 
    typeaheadjs: [{ 
      minLength: 1, 
      highlight: true 
    },{ 
     minlength: 1, 
     source: new Bloodhound({ 
      datumTokenizer: Bloodhound.tokenizers.whitespace, 
      queryTokenizer: Bloodhound.tokenizers.whitespace, 
      local: allTags 
     }) 
    }], 
    freeInput: true 
}); 

与allTags是字符串的JSON数组。

然而，我想实现的是，我不会有一个简单的标签列表，即allTags，我会有某种功能，可以访问不同的列表，然后才能够选择正确的一个取决于某些元素的值。例如，将会有一个下拉列表，根据所选的值，将使用不同的标签列表。 我无法做到这一点。

虽然我发现了一个解决方法，但基本上，我在我的文本输入元素的类名上播放，并且我在初始化尽可能多的类名时有很多tagsInput。这有效，但它似乎太多的体操，并不是一个干净的实施。

任何想法？

UPDATE： 这里是HTML：

<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required> 

的select是正常select。

Answer 1

当select发生变化时，您调用一个函数告诉Bloodhound使用哪个数组（或json文件/ url），然后让它重新运行它的initialize函数来更新提示的建议列表。

HTML：

<h1>Typeahead Test </h1> 
<select onchange="changeList(this.value)"> 
    <option selected value="countries">Countries</option> 
    <option value="cities">Cities</option> 
</select> 

<input id="tags" name="tags" data-role="tagsinput" class="form-control input-sm tagsInput typeahead" type="text" placeholder="Enter some tags" title="Please enter some tags" value="" required> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script> 
<script src="bootstrap-tagsinput.min.js"></script> 

的Javascript：

var country_list = ["Afghanistan", "Albania", "Algeria", "Andorra", "Auckland", "Bahamas", "Bahrain", "Bangladesh", "Barbados", "Belarus", "Belgium", "Belize", "Benin", "Bermuda", "Bhutan", "Bolivia", "Bosnia & Herzegovina", "Botswana", "Brazil"]; 
var city_list = ["Amsterdam", "London", "Paris", "Washington", "New York", "Los Angeles", "Sydney", "Melbourne", "Canberra", "Beijing", "New Delhi", "Kathmandu", "Cairo", "Cape Town", "Kinshasa"]; 

var myData = new Bloodhound({ 
    datumTokenizer: Bloodhound.tokenizers.obj.whitespace('value'), 
    queryTokenizer: Bloodhound.tokenizers.whitespace, 
    local: $.map(country_list, function(item) { 
    return { 
     value: item 
    }; 
    }) 
}); 
myData.initialize(); 

$('#tags').tagsinput({ 
    typeaheadjs: { 
    name: 'value', 
    displayKey: 'value', 
    valueKey: 'value', 
    source: myData.ttAdapter() 
    } 
}); 

// utilised some code from http://stackoverflow.com/a/23000444/1544886 
changeList = function(val) { 
    source = (val === 'cities') ? city_list : country_list; 
    myData.clear(); // First remove all suggestions from the search index 
    myData.local = $.map(source, function(item) { 
    return { 
     value: item 
    }; 
    }); 
    myData.initialize(true); // Finally reinitialise the bloodhound suggestion engine 
}; 

这里有一个plunker：http://plnkr.co/edit/6mjDrgDwqzWeLJQOcA3D?p=preview