javascript - 是否有可能在文本编辑器中为 Rails 应用程序自动完成，而不仅仅是文本字段

Question

我查了很多，没有找到有用的东西，所以我问一下。上下文是 Rails 2.3.x，通常的 javascript 库。我想达到以下目的:

1. 我想要类似于 <%= text_field_with_auto_complete :recipe, :name %> 的东西但在文本编辑器上:<%= text_editor_with_auto_complete :recipe, :description, '\w+\:\w+' %>
2. 何时开始自动完成应该是可定制的(最好通过正则表达式)。因此，我不想从所有内容开始，而是从 \w+\:\w+ 开始。这意味着:当输入以非空格字符开头、后跟“:”符号、再后跟非空格字符的字符串时，开始调用自动完成。
3. 当然，应该只对与正则表达式匹配的字符串进行替换。

您知道有什么解决方案可以满足我的需求吗？

Answer 1

abstraktor 的回答给了我一个很好的起点，但是有一些遗漏的部分。所以我在 github: jquery-autocomplete-inner 上开发了一个例子

这是示例的完整源代码(无 HTML)和一些解释:

$().ready(function() {
// search only, if the regexp matches
var cities = [
    "Amsterdam", "Stuttgart", "Singapore", "Madrid", "Barcelona", "Hamburg",
    "Esslingen", "Berlin", "Frankfurt", "Essingen", "Straßburg", "London",
    "Hannover", "Weil am Rhein", "Tuttlingen", "München", "Marsaille", "Paris",
    "Manchester", "Rome", "Neapel", "New York", "Brasil", "Rio de Janeiro"
];
// Defines for the example the match to take which is any word (with Umlauts!!).
function _leftMatch(string, area) {
    return string.substring(0, area.selectionStart).match(/[\wäöüÄÖÜß]+$/)
}

function _setCursorPosition(area, pos) {
    if (area.setSelectionRange) {
        area.setSelectionRange(pos, pos);
    } else if (area.createTextRange) {
        var range = area.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
    }
}

$("#citites").autocomplete({
    position: { my : "right top", at: "right bottom" },
    source: function(request, response) {
        var str = _leftMatch(request.term, $("#citites")[0]);
        str = (str != null) ? str[0] : "";
        response($.ui.autocomplete.filter(
                cities, str));
    },
    //minLength: 2,  // does have no effect, regexpression is used instead
    focus: function() {
        // prevent value inserted on focus
        return false;
    },
    // Insert the match inside the ui element at the current position by replacing the matching substring
    select: function(event, ui) {
        //alert("completing "+ui.item.value);},
        var m = _leftMatch(this.value, this)[0];
        var beg = this.value.substring(0, this.selectionStart - m.length);
        this.value = beg + ui.item.value + this.value.substring(this.selectionStart, this.value.length);
        var pos = beg.length + ui.item.value.length;
        _setCursorPosition(this, pos);
        return false;
    },
    search:function(event, ui) {
        var m = _leftMatch(this.value, this);
        return (m != null )
    }
});
})

• 首先是示例的数据，一些城市(主要是德国)
• 一个辅助函数，用于提取光标左侧匹配的子字符串，名为 _leftMatch
• 主要从 jQuery Set Cursor Position in Text Area 复制的辅助函数
• 那么在autocomplete的使用上有以下几点:
  • 仅当光标位置之前的子字符串 (_leftMatch) 与定义的正则表达式匹配时搜索(在我的示例中 /[\wäöüÄÖÜß]+$/ --> 所有德语工作字符)。
  • 通过使用请求 - 响应变体并按子字符串过滤源事物(如 autocomplete with multiple values 的其他示例
  • 用用户选择的内容替换匹配的子字符串，并确保光标正好位于其后。

如果您想看一看，请从 GitHup repository 下载 zip 文件。并在 examples/cities-local.html 下启动本地示例。