如何利用JavaScript实现表单自动补全功能

为了提升用户体验，给予用户更多便利，我们需要在表单中新增表单自动补全功能，下面web建站小编给大家简单介绍一下如何利用JavaScript实现表单自动补全功能！

具体实现代码如下：

var autofillOptions = ["vue", "javascript", "jquery", "css", "node", "mysql", "php", "go", "echarts", "git"];

var inputElement = document.getElementById("input"); // 获取表单元素
 
inputElement.addEventListener("input", function() {
  var inputText = inputElement.value; // 获取用户输入的文本
  var autocompleteList = document.getElementById("autocomplete-list"); // 获取自动补全选项列表元素
 
  // 清空自动补全选项列表
  autocompleteList.innerHTML = "";
 
  // 遍历数据源，匹配用户输入的文本
  autofillOptions.forEach(function(option) {
    if (option.startsWith(inputText)) {
      // 创建一个自动补全选项项
      var optionElement = document.createElement("div");
      optionElement.textContent = option;
 
      // 添加点击事件监听器，将选项填入表单元素
      optionElement.addEventListener("click", function() {
        inputElement.value = option;
        autocompleteList.innerHTML = "";
      });
 
      // 将选项添加到自动补全选项列表中
      autocompleteList.appendChild(optionElement);
    }
  });
});