Отображение значений из источника в виде тегов

Я использую плагин ввода тегов Bootstrap. Я хочу отображать некоторые значения в виде тегов в указанном поле ввода. Эти значения извлекаются из БД, скорее всего, в формате json. Я использовал метод добавления, как показано в документации https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples, но не смог заставить его работать.

Моя демонстрация скрипки находится здесь: https://jsfiddle.net/Lh4jy9d4/90/ $('input #expertise').tagsinput('add', {id: 1, text: 'javascript' })


jquery bootstrap-tags-input
person user596502    schedule 22.06.2016    source источник
comment
Какой браузер вы используете? У меня работает в Хроме   -  person Siavas    schedule 22.06.2016
comment
я тоже, но у меня теги не отображаются при загрузке   -  person user596502    schedule 22.06.2016
comment
В вашем проекте попробуйте удалить пробел между input #expertise — если оставить пробел, это означает, что #expertise является дочерним элементом ввода, но в вашем случае #expertise — это идентификатор вашего ввода, поэтому селектор — input#expertise.   -  person Siavas    schedule 22.06.2016

Ответы (1)


arrow_upward
1
arrow_downward

Как упоминал @Siavas, фильтрация была неправильной в соответствии с вашей разметкой. Я изменил $('input #expertise') на $('#expertise'), потому что тип ввода имел этот идентификатор.

Ваш пример не сработал, потому что вы забыли инициализировать tagsInput. Проверьте этот рабочий фрагмент, адаптированный из их примера на git-hub.

        var citynames = new Bloodhound({
            datumTokenizer: Bloodhound.tokenizers.obj.whitespace('name'),
            queryTokenizer: Bloodhound.tokenizers.whitespace,
            prefetch: {
                url: 'https://bootstrap-tagsinput.github.io/bootstrap-tagsinput/examples/assets/citynames.json',
                filter: function (list) {
                    return $.map(list, function (cityname) {
                        return { name: cityname };
                    });
                }
            }
        });
        citynames.initialize();

        $('input').tagsinput({
            typeaheadjs: {
                name: 'citynames',
                displayKey: 'name',
                valueKey: 'name',
                source: citynames.ttAdapter()
            }
        });
<link href="https://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="form-group">
    <label class="col-lg-3 control-label">Expertise</label>
    <div class="col-lg-5">
        <input type="text" name="cities" id="expertise" class="form-control"  />
    </div>
</div>
<div class="form-group">
    <label class="col-lg-3 control-label">Interests</label>
    <div class="col-lg-5">
        <input type="text" name="cities1" id="interests" class="form-control" value="" data-role="tagsinput" />
    </div>
</div>
   




<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://cdn.jsdelivr.net/bootstrap.tagsinput/0.8.0/bootstrap-tagsinput.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.11.1/typeahead.bundle.min.js"></script>

person n0m4d    schedule 22.06.2016
comment
да, спасибо, что указали на ошибки. Я заметил здесь одну вещь: нам нужно удалить атрибут value и data-role из ввода, чтобы приведенный выше код работал. Затем он правильно отображает заданные значения, но не позволяет добавлять новые записи. Есть ли способ добавить новые записи? - person user596502; 22.06.2016
comment
Typehead, похоже, не работает. Выдает мне ошибку сценария, даже когда я пытался в приведенном выше фрагменте. - person user596502; 22.06.2016
comment
Да, чувак, я тоже только что это заметил. Из их примера входная разметка не имеет этих атрибутов (значение и роль данных). Я думаю, что если вы хотите инициализировать его с помощью разметки, вы должны использовать data-role=tabsinput. Если вы хотите инициализировать его программно, оставьте его пустым. - person n0m4d; 22.06.2016
comment
просто попробуйте ввести amsterdam или что-то, начиная с (я хотел проверить печатный шрифт), вы увидите ошибку .. в приведенном выше фрагменте - person user596502; 22.06.2016
comment
@ user596502 Я отредактировал фрагмент для работы с удаленными данными. Теперь при вводе компонент отображает предложения. - person n0m4d; 22.06.2016
comment
спасибо :) я только что быстро опробовал ваш код, typeahead работает. - person user596502; 22.06.2016