实现增强型Autocomplete：模糊匹配、初始列表显示及输入验证-php教程-PHP中文网

实现增强型Autocomplete：模糊匹配、初始列表显示及输入验证

聖光之護

发布： 2025-10-14 11:44:00

原创

922人浏览过

实现增强型autocomplete：模糊匹配、初始列表显示及输入验证

本文将指导你如何增强现有的Autocomplete功能，实现以下目标：在输入框获得焦点时显示完整列表、支持模糊匹配（即在字符串的任何位置进行匹配），以及限制用户输入，确保只能输入Autocomplete列表中存在的值。通过本文，你将学习如何修改现有的JavaScript代码，使其满足这些需求，从而提升用户体验和数据质量。

1. 需求分析

在开始修改代码之前，我们先明确需要实现的功能：

初始列表显示： 当用户点击输入框（获得焦点）时，如果输入框为空，则显示完整的Autocomplete选项列表。
模糊匹配： 搜索时，不仅匹配字符串的开头，还要匹配字符串中任何位置出现的字符。
输入验证： 限制用户只能输入Autocomplete列表中存在的值，防止用户输入任意内容。

2. 代码实现

我们将逐步修改提供的 JavaScript 代码，以实现上述功能。

2.1 初始列表显示

修改 inp.addEventListener("input", function(e) { ... }); 为 inp.addEventListener("focus", function(e) { ... }); 和添加 inp.addEventListener("input", function(e) { ... });，并在 focus 事件处理函数中添加显示完整列表的逻辑。

inp.addEventListener("focus", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
        b = document.createElement("DIV");
        b.innerHTML = arr[i];
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        b.addEventListener("click", function(e) {
            inp.value = this.getElementsByTagName("input")[0].value;
            closeAllLists();
        });
        a.appendChild(b);
    }
});

inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) {
        return false;
    }
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
        if (arr[i].toUpperCase().indexOf(val.toUpperCase()) > -1) {
            b = document.createElement("DIV");
            b.innerHTML = arr[i].replace(new RegExp(val, 'gi'), "<strong>$&</strong>");
            b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
            b.addEventListener("click", function(e) {
                inp.value = this.getElementsByTagName("input")[0].value;
                closeAllLists();
            });
            a.appendChild(b);
        }
    }
});

登录后复制

2.2 模糊匹配

修改 if (arr[i].substr(0, val.length).toUpperCase() == val.toUpperCase()) 为 if (arr[i].toUpperCase().indexOf(val.toUpperCase()) > -1)，实现模糊匹配。同时，优化匹配项的显示，高亮匹配的部分。

if (arr[i].toUpperCase().indexOf(val.toUpperCase()) > -1) {
    b = document.createElement("DIV");
    b.innerHTML = arr[i].replace(new RegExp(val, 'gi'), "<strong>$&</strong>");
    b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
    b.addEventListener("click", function(e) {
        inp.value = this.getElementsByTagName("input")[0].value;
        closeAllLists();
    });
    a.appendChild(b);
}

登录后复制

2.3 输入验证

为了实现输入验证，我们需要在表单提交时检查输入框的值是否在Autocomplete列表中。

首先，获取表单元素和 Autocomplete 列表：

百灵大模型

蚂蚁集团自研的多模态AI大模型系列

177

查看详情

const form = document.getElementById("regForm");
const fruitInput = document.getElementById("myFruitList");

登录后复制

然后，添加表单提交事件监听器，进行验证：

form.addEventListener("submit", function(e) {
  const inputValue = fruitInput.value;
  const isValid = fruitlist.includes(inputValue);

  if (!isValid) {
    e.preventDefault(); // 阻止表单提交
    alert("Please select a valid fruit from the list.");
    fruitInput.classList.add("invalid"); // 添加错误样式
  } else {
    fruitInput.classList.remove("invalid"); // 移除错误样式
  }
});

登录后复制

同时，添加 blur 事件监听器，在输入框失去焦点时进行验证，并提供实时反馈：

fruitInput.addEventListener("blur", function() {
  const inputValue = fruitInput.value;
  const isValid = fruitlist.includes(inputValue);

  if (!isValid && inputValue !== "") {
    fruitInput.classList.add("invalid");
  } else {
    fruitInput.classList.remove("invalid");
  }
});

登录后复制

在 CSS 中添加 .invalid 样式：

input.invalid {
  background-color: #ffdddd;
}

登录后复制

3. 完整代码

以下是修改后的完整 JavaScript 代码：

function autocomplete(inp, arr) {
  var currentFocus;
  inp.addEventListener("focus", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
        b = document.createElement("DIV");
        b.innerHTML = arr[i];
        b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
        b.addEventListener("click", function(e) {
            inp.value = this.getElementsByTagName("input")[0].value;
            closeAllLists();
        });
        a.appendChild(b);
    }
  });

  inp.addEventListener("input", function(e) {
    var a, b, i, val = this.value;
    closeAllLists();
    if (!val) {
      return false;
    }
    currentFocus = -1;
    a = document.createElement("DIV");
    a.setAttribute("id", this.id + "autocomplete-list");
    a.setAttribute("class", "autocomplete-items");
    this.parentNode.appendChild(a);

    for (i = 0; i < arr.length; i++) {
        if (arr[i].toUpperCase().indexOf(val.toUpperCase()) > -1) {
            b = document.createElement("DIV");
            b.innerHTML = arr[i].replace(new RegExp(val, 'gi'), "<strong>$&</strong>");
            b.innerHTML += "<input type='hidden' value='" + arr[i] + "'>";
            b.addEventListener("click", function(e) {
                inp.value = this.getElementsByTagName("input")[0].value;
                closeAllLists();
            });
            a.appendChild(b);
        }
    }
  });

  inp.addEventListener("keydown", function(e) {
    var x = document.getElementById(this.id + "autocomplete-list");
    if (x) x = x.getElementsByTagName("div");
    if (e.keyCode == 40) {
      currentFocus++;
      addActive(x);
    } else if (e.keyCode == 38) {
      currentFocus--;
      addActive(x);
    } else if (e.keyCode == 13) {
      e.preventDefault();
      if (currentFocus > -1) {
        if (x) x[currentFocus].click();
      }
    }
  });

  function addActive(x) {
    if (!x) return false;
    removeActive(x);
    if (currentFocus >= x.length) currentFocus = 0;
    if (currentFocus < 0) currentFocus = (x.length - 1);
    x[currentFocus].classList.add("autocomplete-active");
  }

  function removeActive(x) {
    for (var i = 0; i < x.length; i++) {
      x[i].classList.remove("autocomplete-active");
    }
  }

  function closeAllLists(elmnt) {
    var x = document.getElementsByClassName("autocomplete-items");
    for (var i = 0; i < x.length; i++) {
      if (elmnt != x[i] && elmnt != inp) {
        x[i].parentNode.removeChild(x[i]);
      }
    }
  }

  document.addEventListener("click", function(e) {
    closeAllLists(e.target);
  });
}

var fruitlist = [
  "Apple",
  "Mango",
  "Pear",
  "Banana",
  "Berry"
];

autocomplete(document.getElementById("myFruitList"), fruitlist);

const form = document.getElementById("regForm");
const fruitInput = document.getElementById("myFruitList");

form.addEventListener("submit", function(e) {
  const inputValue = fruitInput.value;
  const isValid = fruitlist.includes(inputValue);

  if (!isValid) {
    e.preventDefault();
    alert("Please select a valid fruit from the list.");
    fruitInput.classList.add("invalid");
  } else {
    fruitInput.classList.remove("invalid");
  }
});

fruitInput.addEventListener("blur", function() {
  const inputValue = fruitInput.value;
  const isValid = fruitlist.includes(inputValue);

  if (!isValid && inputValue !== "") {
    fruitInput.classList.add("invalid");
  } else {
    fruitInput.classList.remove("invalid");
  }
});

登录后复制