以編程方式選擇帶引導程序標籤的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