javascript - 如何在按键时自动填充文本字段

Question

所以我有一个要求，我需要输入一些东西，然后在输入到一半时，它应该会自动填充其余的东西。

例子

我有一个文本字段，我开始在其中键入“col”，然后在我按空格后文本字段应该显示“column”，自动更正系统为 auto。

另外，我想知道是否可以将其实现为来 self 的数据库的数组或一列数据？

我做了类似的东西，但这改变了 innerHTML 字段的值。我需要这个用于文本字段本身。

function handle(e) {
  if (e.keyCode === 32) {
        e.preventDefault();
        document.getElementById("p1").innerHTML = "Column";
    }
}

<p id="p1">Hello World!</p>
<form action="#">
    <input type="text" name="txt" onkeypress="handle(event)" />
</form>

我是新手，所以非常感谢任何帮助

Answer 1

将您的值从您的数据库加载到 JSON 中，并使用 e.target 属性，该属性将包含 HTML 元素，其中 事件发生了。

试试下面的代码:

// load your values from DB here
var dictionary = {
  'col': 'Column',
  'ro': 'Row',
  'tab': 'Table'
};

function handle(e) {
  if (e.keyCode === 32) {
    e.preventDefault();

    for (val in dictionary) {
      if (e.target.value == val) {
        e.target.value = dictionary[val];
        continue;
      }
    }
  }
}

<p id="p1">Hello World!</p>
<form action="#">
  <input type="text" name="txt" onkeypress="handle(event)" />
</form>