Блог

В ан asp.net Основное веб-приложение Я использую Tagify компонент (домашняя страница и примеры тегов) для отображения тегов в элементах управления вводом и областью текста. Следуя примеру по ссылке (см. ниже: Same using custom suggestions ) У меня есть следующий код:

 <div class="col-auto" title="Start typing to show available tags ...">
    <textarea name="tbSearch2" placeholder="Filter by tags" id="tbSearch2" class="form-control email-filter" rows="1"></textarea>
</div>
 

и javascript (ajax выполняется только один раз -> при загрузке страницы):

 var tagslist = '';
    $.ajax({
        'url': "Email/GetTags",
        'success': function (data) {
            tagslist = data;

            // load tags for searching
            var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
                tagTextProp: 'name',
                enforceWhitelist: true,
                delimiters: null,
                whitelist: tagslist,
                editTags: false,
                dropdown: {
                    mapValueTo: 'name',
                    searchKeys: ['name'],
                    maxItems: 20,           // <- maximum allowed rendered suggestions
                    classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
                    enabled: 0,             // <- show suggestions on focus
                    closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
                },
            });
        }
    });
 

Теги работают, но только тогда, когда пользователь начинает вводить текст в текстовую область. Выпадающий список не появляется сразу, когда элемент управления Tagify имеет фокус (как в примере по ссылке в начале этого поста).

Есть идеи, что я делаю не так?

*примечание: в консоли браузера нет ошибок.

Вы можете попробовать проверить версии tagify css и js, вот рабочая демонстрация:

Действие getTags:

 public List<string> GetTags() 
        {

            return new List<string>{ "A# .NET", "A# (Axiom)", "A-0 System", "A ", "A  ", "ABAP", "ABC", "ABC ALGOL", "ABSET", "ABSYS", "ACC", "Accent", "Ace DASL", "ACL2", "Avicsoft", "ACT-III", "Action!", "ActionScript"};
        }
 

JS:

 <script src="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/tagify/4.3.0/tagify.min.css" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <script>
        var tagslist = '';
        $(function () {
            $.ajax({
                'url': "GetTags",
                'success': function (data) {
                    tagslist = data;

                    // load tags for searching
                    var tagify1 = new Tagify(document.querySelector('textarea[name=tbSearch2]'), {
                        tagTextProp: 'name',
                        enforceWhitelist: true,
                        delimiters: null,
                        whitelist: tagslist,
                        editTags: false,
                        dropdown: {
                            mapValueTo: 'name',
                            searchKeys: ['name'],
                            maxItems: 20,           // <- maximum allowed rendered suggestions
                            classname: 'tags-look', // <- custom classname for this dropdown, so it could be targeted
                            enabled: 0,             // <- show suggestions on focus
                            closeOnSelect: false    // <- do not hide the suggestions dropdown once an item has been selected
                        },
                    });
                }
            });
        })
        
    </script>
 

Результат: