文本区域中每一行的 JQuery 自动完成答案

【问题标题】：JQuery Autocomplete for each line in Textarea文本区域中每一行的 JQuery 自动完成
【发布时间】：2017-05-23 19:59:33
【问题描述】：

我尝试搜索，但没有找到解决方案。

我目前正在使用 Jquery 自动完成功能，以及一个存储可能返回结果列表的外部服务。自动完成是在 textarea 上完成的，我需要尝试为每一行文本自动完成。所以用户输入一行，自动完成。转到新行，开始输入，自动完成仅针对该行的内容显示。

设置对于 JQuery 所展示的内容来说是相当标准的。即：

<textarea id="entities"></textarea>

JS：

$("#entities").autocomplete({
        serviceUrl: [the service url],
        paramName: 'prefix'
});

我知道有一些方法可以确定行号并获取特定行的值，例如：

$("#entities").on('keyup', function() {
    var textLines = $("#entities").val().substr(0, $("#entities").selectionStart).split("\n");
    var currentLineNumber = textLines.length - 1;
    console.log(lines[currentLineNumber]);
});

但我不确定如何在键入新行时调用自动完成功能。

编辑：有人建议使用 contentEditable，但这会导致每行的包装器不同，具体取决于浏览器。

<div id="entities" class="entities-text" contenteditable="true"></div>

IE 将每一行转换为：

<p>Line 1</p>
<p>Line 2</p>

FF 节目：

Line 1<br>
Line 2<br>

Chrome 提供：

<div>Line 1</div>
<div>Line 2</div>

【问题讨论】：

你是什么意思：“自动完成每一行文本”？你能更好地描述你需要什么吗？
例如，假设他们在文本区域中输入。当他们第一次开始输入时，会出现自动完成。他们选择术语。现在用户按下回车键并开始在文本区域的第二行输入。自动完成应该再次出现，但只是为他们在文本区域的第二行输入的任何内容提供建议值。简而言之，textarea 是在 textarea 中搜索每行值的表单的一部分。

标签： javascript jquery jquery-ui autocomplete

【解决方案1】：

我不太确定您是否可以使用 textarea 和 textarea 的每一行轻松实现这一点。

我的建议是切换到一个内容可编辑的 div，如果你想要那种样式，可以像 textarea 一样通过 CSS 格式化，然后每次检测到新行时，用 HTML 元素（例如 p）换行。然后只需将自动完成设置为与该 div 内的所有 p 元素一起工作。

这里有一个非常好的示例，说明如何在键入 @ 时执行此操作（这是电子邮件地址的自动完成功能）。稍微修改一下代码，你的工作就完成了。

autocomplete with contenteditable div instead of textarea doesn't seem to work

帖子中还有一个指向 jsfiddle 示例的链接。

【讨论】：

好的，我明天再看看。感谢您的建议。
不幸的是，这增加了另一个需要修复的问题 - IE 自动将每个都包装在
中，但 FF 使用
而 Chrome 包装在

中。
是的，但是如果您使用自己的 wrapper ，那么您只需要自己触发自动完成，您就不会关心已被包装的其他元素。你明白我的意思吗？
不，我不明白。 “你自己的包装”是什么意思？你能举个例子吗？
我的意思是当你检测到一个新行时，你会用一个 HTML 元素来包装该行的内容，比如说<div class="row-in-the-editor"></div>。所以你的内容在这个 div 里面。然后，如果浏览器将您的元素与另一个元素包装在一起，那没关系，因为您可以在您的 contenteditable 内的所有具有“row-in-the-editor”类的元素中触发自动完成。有意义吗？

【解决方案2】：

我认为这个功能对你很有帮助......完成你的要求。

 function CreateTextAreaAutoFill(idstr, AutoFillAry) {
    $("#" + idstr)
        // don't navigate away from the field on tab when selecting an item
        .on("keydown", function (event) {
            if (event.keyCode === $.ui.keyCode.TAB &&
                $(this).autocomplete("instance").menu.active) {
                event.preventDefault();
            }
        })
        .autocomplete({
            minLength: 0,
            source: function (request, response) {
                // delegate back to autocomplete, but extract the last term
                response($.ui.autocomplete.filter(
                    AutoFillAry, extractLast(request.term, idstr)));
            },
            focus: function () {
                // prevent value inserted on focus
                return false;
            },
            open: function (event, ui) {
               // $(this).autocomplete('widget').find('li').css('font-size', '10px');
               // $(this).autocomplete('widget').css('height', 100);
            },
            select: function (event, ui) {
                //var terms = split(this.value);
                //// remove the current input
                //terms.pop();
                //// add the selected item
                //terms.push(ui.item.value);
                //// add placeholder to get the comma-and-space at the end
                //terms.push("");
                //this.value = terms.join(" ");//terms.join(", ");
                debugger;
                var term = this.value;
                var cursorPosition = $('#' + idstr).prop("selectionStart");
                var SpaceInd = term.lastIndexOf(" ", (cursorPosition - 1));
               // var SubStr = term.substring((SpaceInd + 1), cursorPosition);
                var NewLineInd = term.lastIndexOf("\n", (cursorPosition - 1));
                var SubStrInd = SpaceInd < NewLineInd ? NewLineInd : SpaceInd;
                var FirstStr = this.value.substring(0, (SubStrInd + 1)) + ui.item.value;
                this.value = FirstStr + this.value.substring(cursorPosition, this.value.length);

                $('#' + idstr).prop('selectionEnd', FirstStr.length);

                return false;
            }
        });

    //function split(val) {
    //   // return val.split(/;\s*/);
    //   // return val.split(' ');
    //    var LineAry = val.split("\n");
    //    var FinalResult = [];
    //    $.each(LineAry, function (ind, Aval) {
    //        FinalResult = FinalResult.concat(Aval.split(' '));
    //    })
    //    return FinalResult;
    //}
    function extractLast(term, idstr) {
        debugger;
        var cursorPosition = $('#' + idstr).prop("selectionStart");
        var SpaceInd = term.lastIndexOf(" ", (cursorPosition - 1));
        var NewLineInd = term.lastIndexOf("\n", (cursorPosition - 1));
        var SubStrInd = SpaceInd < NewLineInd ? NewLineInd : SpaceInd;
        var SubStr = term.substring((SubStrInd + 1), cursorPosition);

        return SubStr;//split(term).pop();
    }
}

【讨论】：