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

Question

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

例子

我有一个文本字段，我开始在其中键入 "col"，然后在我按下 space 之后，文本字段应该显示 "column"，自动更正系统。

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

我做了类似的东西，但这改变了 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

尝试 jquery 自动建议：访问 HERE

  $( function() {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell"
    ];
    $( "#tags" ).autocomplete({
      source: availableTags
    });
  } );

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

Answer 2

您必须研究自动完成。您使用哪种语言进行 Web 开发？

https://jqueryui.com/autocomplete/

Answer 3

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

试试下面的代码：

// 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>

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

How to autofill a text field when pressing a key

html

javascript

keypress

onkeypress

例子