4

我喜欢 jQuery 的 Tag-It 插件，但如果我将它设置为自动完成，它并不总是按我想要的方式工作。

这是一个例子。

我的自动完成数组由“Pink Lady Apple”、“Granny Smith Apple”、“Golden Delicious Apple”和“Apple”组成。

如果我输入“Apple”，它不会显示 Pink Lady、Granny Smith 或 Golden Delicious。它只建议苹果。有没有办法可以改变它，以便它也扫描包含 Apple 但不以 Apple 开头的标签？

4

3 回答 3

6

我遇到了同样的问题，所以我使用@Ravindra 的提示（+1 BTW）来查看我是否可以对插件进行逆向工程并找出 tagSource 函数预期返回的内容。

tagSource 函数返回一个布尔值。如果 availableTags 数组中的标签显示在自动完成列表中，则返回 True。返回 False 表示不应显示该标签。

这是默认的 tagSource 函数，它使用 indexOf 来确定到目前为止键入的文本是否与availableTags 数组中的标记开头匹配：

原始，默认功能：

tagSource: function(search, showChoices) {
    var filter = search.term.toLowerCase();
    var choices = $.grep(this.options.availableTags, function(element) {
       // Only match autocomplete options that begin with the search term.
       // (Case insensitive.)
       return (element.toLowerCase().indexOf(filter) === 0);
    });
    showChoices(this._subtractArray(choices, this.assignedTags()));
}

我复制了该函数并将其粘贴到 .tagit 函数中，因此它被包含为传递给 jQuery tagit 初始化函数的参数之一。然后我将其修改为使用 match 方法，该方法使用模式匹配来返回与模式匹配的字符串部分。如果匹配返回 null，则不要在列表中显示它。如果它返回任何其他内容，请在列表中显示该标签：

作为参数传入的修改函数：

tagSource: function(search, showChoices) {
    var filter = search.term.toLowerCase();
    var choices = $.grep(this.options.availableTags, function(element) {
       // Only match autocomplete options that begin with the search term.
       // (Case insensitive.)
       //return (element.toLowerCase().indexOf(filter) === 0);
       console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter);
       return (element.toLowerCase().match(filter) !== null);
    });
    showChoices(this._subtractArray(choices, this.assignedTags()));
}

例子：

$('#tagged').tagit({
    onTagRemoved: function() {
        alert("Removed tag");
    },

    availableTags: [ "one" , "two one" , "three" , "four" , "five" ],

    // override function to modify autocomplete behavior
    tagSource: function(search, showChoices) {
        var filter = search.term.toLowerCase();
        var choices = $.grep(this.options.availableTags, function(element) {
           // Only match autocomplete options that begin with the search term.
           // (Case insensitive.)
           //return (element.toLowerCase().indexOf(filter) === 0);
           console.info(element.toLowerCase().match(filter) + " : " + element + " : " + filter);
           return (element.toLowerCase().match(filter) !== null);
        });
        showChoices(this._subtractArray(choices, this.assignedTags()));
    }
});
于 2012-02-21T23:08:59.010 回答
4

它使用Tag-it的tagSource属性为我工作。我正在使用http://aehlke.github.com/tag-it/

于 2012-01-27T13:12:27.090 回答
0

Tag-It 继承了 wai-aria 实现的自动完成功能。这默认情况下只知道三种状态：

无 - 根本没有完成
内联 - 以...
开头 列表 - 全部可用

因此，如果不扩展 tag-it 以使用不同的自动完成方法，这是不可能的。

有关 WAI-ARIA 的更多信息，请参见此处：

http://www.w3.org/WAI/intro/aria

http://test.cita.illinois.edu/aria/

于 2011-07-27T12:29:59.643 回答