Tagify -展示关于焦点不起作用的建议

Question

在asp.net核心web应用程序中，我使用Tagify组件(Tagify主页及示例)在输入和textarea控件中显示标记。下面是链接中的一个示例(参见：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控件有焦点时，下拉列表不会立即出现(如本文开头的链接中的示例)。

知道我做错什么了吗？

*注意:浏览器控制台中没有错误。

Answer 1

您可以尝试检查tagifycss和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"};
        }

联署材料：

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

结果：

​