是否可以在文本编辑器中为 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. 应该可以自定义（最好通过 reg 表达式）何时开始自动完成。因此，我不想从全部内容开始，而是从\w+\:\w+ 开始，这意味着：当输入以非空格字符开头的字符串时开始调用自动完成，然后是'：'符号，然后是非-空格字符。
3. 当然只能在匹配 reg 表达式的字符串上进行替换。

您知道任何可以适应我需要的解决方案吗？

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复制的辅助函数
• 那么在自动补全的使用中，有以下几点：
  • 仅当光标位置之前的子字符串 (_leftMatch) 与定义的正则表达式匹配时才搜索（在我的示例中为 /[\wäöüÄÖÜß]+$/ --> 所有德语工作字符）。
  • 使用请求 - 响应变体过滤源事物并通过子字符串过滤（如 autocomplete with multiple values 的其他示例
  • 将匹配的子字符串替换为用户的选择，并确保光标位于其后。

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

Answer 2

将jquery ui autocomplete 与自定义搜索功能一起使用怎么样？假设您的文本区域的 id 是#birds：

// search only, if the regexp matches
$("#birds").autocomplete({
  source: "/birds/search",
  minLength: 2,
  select: function( event, ui ) {alert("completing "+ui.item.value);}
  search:function(){/\W:\w+$/.test($(ui.item.value).val())}
  })

现在您仍然需要在服务器端实现该搜索...也许您可以稍后调整搜索，只传输单词而不是整个 textarea 值...