实施例

Question

所以我有一个要求，我需要输入一些东西，然后中途，它应该自动填充剩下的东西。

实施例

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

另外，我想知道这是否可以作为来自我的数据库的数组或数据列实现？

我做了类似的事情，但这改变了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的{{1}}元素。

请尝试以下代码：

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;
      }
    }
  }
}

Answer 2

尝试jquery自动建议：访问HERE

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 3

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

https://jqueryui.com/autocomplete/

如何在按键

实施例

3 个答案: