Программно выберите список тегов автозаполнения Bloodhound с помощью тегов Bootstrap.

У меня есть текстовый ввод, который питается от 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 для стольких имен классов, сколько есть списков. Это работает, но кажется слишком гимнастическим и не очень чистой реализацией.

Любые идеи?

ОБНОВЛЕНИЕ: вот 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.


javascript typeahead.js bootstrap-tags-input bloodhound
person Peter    schedule 26.02.2017    source источник
comment
Дайте html код пожалуйста   -  person Bahadir Tasdemir    schedule 26.02.2017
comment
Посмотрите на исходный код typehead. Это может быть функция. Там вы можете прочитать другие входные значения и создать нужный список тегов. bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples   -  person Andreyy    schedule 28.02.2017
comment
не могли бы вы продемонстрировать на небольшом примере в JSFiddle   -  person Pavan Kumar Jorrigala    schedule 01.03.2017

Ответы (1)


arrow_upward
5
arrow_downward

Когда select изменяется, вы вызываете функцию, чтобы сообщить Bloodhound, какой массив (или файл json/url) использовать, а затем просите его повторно запустить свою функцию initialize, чтобы обновить список предложений typeahead.

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

Вот плункер: http://plnkr.co/edit/6mjDrgDwqzWeLJQOcA3D?p=preview

person K Scandrett    schedule 04.03.2017
comment
В итоге я сделал вариант этого, используя методы clear и add Bloodhound для некоторых событий выбора. Отличная работа! - person Peter; 05.03.2017