在 textarea 中使用内联建议自动完成

Question

我的项目有一个文本区域

<textarea class="FormControl Composer-flexible TextEditor-editor" placeholder="message..." style="height: 189px;"></textarea>

我来这里是想问一下是否有一种方法可以在 textarea 本身的建议中自动完成。例如，如果我开始写“这里”，我想看到建议“建议来了”，如果我按 TAB 键或其他键，我可以 select 建议。

有一种方法可以做到这一点 javascript?

Answer 1

是这样的吗？

注意我的代码区分大小写

const texts = ["Here comes the suggestion", "Another suggestion"]

document.getElementById("editor").addEventListener("keydown", function(e) {
  console.log(e.key, e.target.value)
  if (e.key === "Tab") {
    const val = this.value;
    texts.forEach(text => {
      if (text.startsWith(val)) this.value = text;
    })
  }
})

<textarea id="editor" class="FormControl Composer-flexible TextEditor-editor" placeholder="message..." style="height: 189px;"></textarea>

Answer 2

你可以试试这个。

const suggestions = [
                      "Here comes the suggestions", 
                      "I like pizza", 
                      "I'm a good programmer"
                    ]

var textarea = document.getElementById('textarea')

textarea.addEventListener('keyup', (e) => {
  var result = suggestions.filter(el => el.startsWith(textarea.value))
  console.log(result)
})

    <textarea class="FormControl Composer-flexible TextEditor-editor" id="textarea" placeholder="message..." style="height: 189px;"></textarea>

将结果放入框中。

在 textarea 中使用内联建议自动完成

autocomplete with inline suggestion in textarea

javascript

autocomplete