本文将指导你如何增强现有的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 事件处理函数中添加显示完整列表的逻辑。
立即进入“豆包AI人工智官网入口”；
立即学习“豆包AI人工智能在线问答入口”；
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 列表：
豆包大模型 字节跳动自主研发的一系列大型语言模型
834 查看详情 
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"); }});登录后复制4. 注意事项
性能优化： 对于大型数据集，模糊匹配可能会影响性能。可以考虑使用更高效的搜索算法或对数据进行预处理。用户体验： 在输入验证时，提供清晰的错误提示，帮助用户选择正确的值。安全性： 在服务器端进行数据验证，防止恶意用户绕过客户端验证。5. 总结
通过修改 Javascript 代码，我们成功实现了增强型的 Autocomplete 功能，包括初始列表显示、模糊匹配和输入验证。这些功能可以显著提升用户体验和数据质量。在实际应用中，可以根据具体需求进行进一步的优化和定制。
以上就是实现增强型Autocomplete：模糊匹配、初始列表显示及输入验证的详细内容，更多请关注php中文网其它相关文章！
