jquery提到jquery ui自动完成答案

【问题标题】：Jquery mentions jquery ui autocompletejquery提到jquery ui自动完成
【发布时间】：2016-10-07 06:09:46
【问题描述】：

我正在尝试理解 jquery 提到的插件 jquery mentions，我在插件中遇到了这个部分。谁能解释这是什么意思？最后一个返回函数特别做什么？当匹配值的长度小于 4 时，我想关闭自动完成下拉列表

     search: function (value, event) {
        var match, pos;
        //&& value.length >= this.options.minChars
        if (!value) {
            //sel = window.getSelection();
            //node = sel.focusNode;
            value = this._value();
            pos = Selection.get(this.element).start;
            value = value.substring(0, pos);
            match = this.matcher.exec(value);
            if (!match || match[1].length <= this.options.minChars) {
                return '';
            }

            this.start = match.index;
            this.end = match.index + match[0].length;
            this.searchTerm = match[1];
            //this._setDropdownPosition(node);
        }
        return $.ui.autocomplete.prototype.search.call(this, this.searchTerm, event);
    }

【问题讨论】：

标签： javascript jquery oop jquery-ui

【解决方案1】：

在这个插件中，定义了新的 jQueryUI 小部件 - ui.editablecomplete 和 ui.areacomplete。这两个小部件基本上都扩展了常规的autocomplete 小部件以支持<textarea> 元素和contenteditable 元素。

只要您在输入中输入任何内容（<input type="text">、<textarea> 等），搜索方法就会运行。如果它通过search 方法中的所有if 语句，它会操纵数据并调用最后一个返回语句：$.ui.autocomplete.prototype.search.call(this, this.searchTerm, event);，它基本上告诉autocomplete 小部件照常接管并继续其所有操作。这类似于经典继承中的覆盖。

无论如何，如果您只想打开超过 4 个字符的自动完成下拉菜单，则需要更改 matcher 正则表达式。默认情况下，/\B[@]([^@]{0,20})$/ 将输入的长度限制在 0 到 20 个字符之间。我没有看到通过 API 更改它的方法，所以我想您需要稍微更改代码。

这个函数定义了matcher:

MentionsBase.prototype._getMatcher = function() {
    var allowedChars;
    allowedChars = '[^' + this.options.trigger + ']';
    return '\\B[' + this.options.trigger + '](' + allowedChars + '{0,20})';
};

您可以将{0,20} 更改为{4,20}（或{5,20}，如果您想要GT 而不是GTE）。

一个更好的主意是向插件作者创建一个拉取请求，将匹配正则表达式公开给 API，而不是更改代码。

【讨论】：

谢谢，但我解决了这个问题。 :) 现在我坚持将自动完成下拉菜单带到文本区域中的光标。我用谷歌搜索并尝试了所有解决方案，但还没有运气。

【解决方案2】：

我解决了这个问题，因为我发现搜索项没有被重置，下拉菜单没有返回空值。所以我像这样更改了搜索代码。

 search: function (value, event) {
        var match, pos;
        //&& value.length >= this.options.minChars
        if (!value) {
            //sel = window.getSelection();
            //node = sel.focusNode;
            value = this._value();
            pos = Selection.get(this.element).start;
            value = value.substring(0, pos);
            match = this.matcher.exec(value);
            if (!match ) {

                return '';
            }


            this.start = match.index;
            this.end = match.index + match[0].length;
            this.searchTerm = match[1];
            if (match[1].length <= this.options.minChars) {//customization: to check minChars

                this.searchTerm = '';// customization: to clear autocomplete dropdown
            }
            this._setDropdownPosition($('.mentions')[0]);
        }
        return $.ui.autocomplete.prototype.search.call(this,this.searchTerm, event);
    }

【讨论】：