Programmatically choose list of Bloodhound autocomplete tags with Bootstrap tagsinput

Question

I have a text input that is powered by Bootstrap Tagsinput. Currently, this text input is initialized with a single list of tags that are used in Typeahead autocomplete:

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

with allTags being a Json array of strings.

What I would like to achieve however is that instead of having a plain list of tags i.e. allTags, I would have some sort of function that has access to different lists and would then be able to select the right one depending on the value of some element. For instance, there will be a drop-down list and depending on the value selected, a different list of tags would be used. I could not achieve that.

I found a workaround though, basically, I play on class names of my text input element, and I initialize as many tagsInput on as many class names as there are lists. This works but it seems to be too much of a gymnastic and not really a clean implementation.

Any ideas?

UPDATE: Here is the 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>

The select is a normal select.

Answer 1

When the select changes you call a function to tell Bloodhound which array (or json file / url) to use, and then ask it to re-run its initialize function to update the typeahead suggestion list.

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

Here's a plunker: http://plnkr.co/edit/6mjDrgDwqzWeLJQOcA3D?p=preview