是否可以在文本编辑器中获取rails应用程序的自动完成function，而不仅仅是文本字段

我搜索了很多，但没有找到任何有用的东西，所以我只是问。 上下文是Rails 2.3.x，通常的JavaScript库。 我想达到以下目的：

1. 我希望有一些类似于但在文本编辑器上：
2. 它应该可以自定义（最好通过reg-expression）何时开始自动完成。 因此，我不想开始整个内容，而是开始使用\w+\:\w+ ，这意味着：当输入一个以非空格字符开头，后跟’：’符号的字符串时，开始调用自动完成其次是非空格字符。
3. 替换应该仅在匹配reg-expression的字符串上进行。

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

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复制
• 然后在自动填充的用法中使用以下几点：
  • 仅在光标位置前的子字符串（_leftMatch）与定义的正则表达式匹配时进行搜索（在我的示例/[\wäöüÄÖÜß]+$/ – >所有德语工作字符中）。
  • 使用请求 – 响应变体过滤源事物并通过子字符串过滤（如在具有多个值的自动完成的其他示例中）
  • 用来自用户的选择替换匹配的子字符串，并确保光标位于其后。

如果您想查看，请从GitHup存储库下载zip文件，并启动examples/cities-local.html下的本地示例。

Answer 2

如何使用自定义搜索function的jquery ui自动完成function。 假设你的文本区域的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值…