Question

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

我目前正在使用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>

Answer 1

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

我的建议是切换到一个contenteditable div，如果你想要那个样式，可能通过CSS格式化像textarea格式，然后每次检测到一个新行时，用HTML元素包装新行（例如p）。然后只需设置自动完成功能即可使用该div中的所有p元素。

如果您输入@（它是电子邮件地址的自动填充功能），您可以在这里找到一个非常好的示例。改变一下代码，你就可以完成你的工作了。

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

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

Answer 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();
    }
}

Textarea中每行的JQuery Autocomplete

2 个答案: