Question

我有一系列成分：

var ingredients = ["Apple", "Orange", "Banana"];

我如何制作它以便textarea中的每一行都能自动完成一个成分。

例如，如果我在第一行输入“Ap”，它应该建议苹果。在下一行中，如果我输入“Or”，则应该建议使用橙色。

请提供帮助，并提前致谢。

Answer 1

这是你在找什么？

https://jsfiddle.net/pLmr3uxz/

var keysPressed = 0;
    var preventLineBreak = false;
    var match = "";
    var ingredients = ["Apple", "Orange", "Banana"];
    $('textarea').keydown(function (e) {
        if (e.keyCode == 13 && this.selectionStart != this.selectionEnd) {
            $('textarea')[0].selectionStart = $('textarea')[0].selectionEnd;
            if (preventLineBreak == true) {
                e.preventDefault();
                preventLineBreak = false;
            }
        }
        keysPressed++;
    });
    $('textarea').keyup(function (e) {
        keysPressed--;
        if(keysPressed == 0){
            var position = $('textarea')[0].selectionStart;
            if (!(/[a-zA-Z0-9-_ ]/.test(String.fromCharCode(e.keyCode)))) { return false; }
            var haveMatch = false;
            var textValue = $('textarea').val();
            var searchValueStart = textValue.slice(0, position).lastIndexOf('\n') + 1;
            var beforeSearchValue = textValue.slice(0, searchValueStart);
            var afterSearchValue = textValue.slice(position, textValue.length);
            var searchvalue = textValue.slice(searchValueStart, position);
            ingredients.forEach(function (value) {
                if (!haveMatch && searchvalue && value.slice(0, searchvalue.length).toLowerCase() == searchvalue.toLowerCase()) {
                    match = value;
                    haveMatch = true;
            }
            });
            if (match) {
                $('textarea').val(beforeSearchValue + match + afterSearchValue);
                $('textarea')[0].selectionStart = beforeSearchValue.length + searchvalue.length;
                $('textarea')[0].selectionEnd = beforeSearchValue.length + match.length;
                match = "";
                preventLineBreak = true;
            }  
        }
    });

<textarea></textarea>
<script   src="https://code.jquery.com/jquery-2.2.4.min.js"   integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="   crossorigin="anonymous"></script>

我如何自动完成textarea中的每一行？

1 个答案: