Question

我正在尝试使用bootstrap-tagsinput和typeahead.js来为用户提供基于标签的输入机制，以便选择一个或多个可用标签集合。这些标记匹配服务器端标记枚举中的可能值，服务器端模型绑定器喜欢在逗号分隔列表中查看（使一组标记完美）。

出现此对话框的对话框将包含大量此类输入 - 每个输入都有不同的可用标记（通常为每个四个或五个）。我希望能够做的是使用一个属性填充每个输入，该属性包含一个逗号分隔的可能标记值列表，类型可以从中读取。

这是一个适用于单个输入的javascript块的示例：

$('#ExampleInput').tagsinput({
    allowDuplicates: false,
    freeInput: false,
    typeaheadjs: [
        {
            hint: true,
            highlight: true,
            minLength: 0
        }, {
            source: function (query, syncResults) {
                // an array that will be populated with substring matches
                var matches = [];

                // regex used to determine if a string contains the substring `q`
                var substrRegex = new RegExp(query, 'i');

                // iterate through the pool of strings and for any string that
                // contains the substring `q`, add it to the `matches` array
                $.each($('#ExampleInput').attr('data-values').split(','), function(i, str) {
                    if (substrRegex.test(str)) {
                        matches.push(str);
                    }
                });

                syncResults(matches);
            }
        }
    ]
});

这是输入内容的示例:(通过一些不相关的数据验证，为清晰起见而删除）

<input class="form-control text-box single-line" data-values="Tag1,Tag2,Tag3,Tag4" id="ExampleInput" name="ExampleInput" type="text" value="Tag1, Tag2, Tag3, Tag4" />

如您所见，提供预输入位的源函数引用#OneneInput的数据值属性来提取可用标记列表。这一切都与我喜欢的一模一样。

我遇到的问题是，我希望能够大规模地针对一类输入应用此方法，而不是针对每个输入单独应用。我无法看到如何使源函数知道目标输入对象（#ExampleInput），以便它可以追踪特定于它为其提供源的输入的正确属性。

这可能吗？或者我是否必须将每个输入与其自己的静态预先输入源配对？

Answer 1

事实证明这是一个非常愚蠢的事情。我被挂在使用$（this）上，就像我通常在这样的jQuery语句中一样。这不会起作用，因为$（this）是typeaheadjs配置语句范围内的文档。

我最后在类选择器之后使用jQuery $ .each（），然后在typeahead源调用中使用foreach中指定的变量。

例如：

var simpleSource = function (strings) {
    return function (query, syncResults) {
        var matches = [];

        var substrRegex = new RegExp(query, 'i');

        $.each(strings, function(i, str) {
            if (substrRegex.test(str)) {
                matches.push(str);
            }
        });

        syncResults(matches);
    }
}

$('.target-class').each(function (index, target) {
    $(target).tagsinput({
        allowDuplicates: false,
        freeInput: false,
        typeaheadjs: [
            {
                hint: true,
                highlight: true,
                minLength: 0
            }, {
                source: simpleSource($(target).attr('data-values').split(","))
            }
        ]
    });
});

（这个版本只是将源函数抽象为可重用的函数 - 在语义上类似于问题中的版本）

所以，这最终成为jQuery / JavaScript 101的东西，而不是关于typeahead或tagsinput的缺陷。这里没什么好看的，离开。： - ）

如何将.tagsinput（）所应用的对象的引用传递给typeahead源函数？

1 个答案: