JavaScript를 사용하여 양식 자동 완성 구현

var autofillOptions = ["apple", "banana", "cherry", "durian", "elderberry", "fig", "grape", "honeydew", "imbe", "jackfruit"];

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