本文将指导你如何增强HTML表单的自动完成功能，使其具备以下特性：在光标悬停时显示所有选项，支持在字符串的任何位置进行模糊匹配，并强制用户输入的内容必须是自动完成列表中的有效值。我们将通过修改现有的JavaScript代码，并添加必要的验证逻辑来实现这些功能。
1. 光标悬停时显示所有选项
要实现光标悬停时显示所有选项，我们需要修改 fruitautocomplete 函数中的事件监听器。当输入框获得焦点时，如果输入框为空，则显示完整的 fruitlist。
inp.addEventListener("focus", function(e) {
if (!this.value) {
showAllOptions(this, fruitlist);
}
});
function showAllOptions(inp, arr) {
var a, b, i, val = ""; // val设为空，显示所有项
closeAllLists();
currentFocus = -1;
a = document.createElement("DIV");
a.setAttribute("id", inp.id + "autocomplete-list");
a.setAttribute("class", "autocomplete-items");
inp.parentNode.appendChild(a);
for (i = 0; i < arr.length; i++) {
b = document.createElement("DIV");
b.innerHTML = arr[i];
b.innerHTML += "";
b.addEventListener("click", function(e) {
inp.value = this.getElementsByTagName("input")[0].value;
closeAllLists();
});
a.appendChild(b);
}
}这段代码添加了一个 focus 事件监听器，当输入框获得焦点且内容为空时，调用 showAllOptions 函数。 showAllOptions 函数与原有的自动完成逻辑类似，但它会显示 fruitlist 中的所有选项，而不管输入框中的内容是什么。
2. 支持在字符串的任何位置进行模糊匹配
为了支持模糊匹配，我们需要修改自动完成逻辑中的字符串比较部分。不再使用 substr 和 toUpperCase 来检查字符串是否以输入框中的内容开头，而是使用 indexOf 来检查字符串是否包含输入框中的内容。
立即学习“前端免费学习笔记（深入）”；
if (arr[i].toUpperCase().indexOf(val.toUpperCase()) > -1) {
/*create a DIV element for each matching element:*/
b = document.createElement("DIV");
/*make the matching letters bold:*/
let index = arr[i].toUpperCase().indexOf(val.toUpperCase());
b.innerHTML = arr[i].substr(0, index);
b.innerHTML += "" + arr[i].substr(index, val.length) + "";
b.innerHTML += arr[i].substr(index + val.length);
/*insert a input field that will hold the current array item's value:*/
b.innerHTML += "";
/*execute a function when someone clicks on the item value (DIV element):*/
b.addEventListener("click", function(e) {
/*insert the value for the autocomplete text field:*/
inp.value = this.getElementsByTagName("input")[0].value;
/*close the list of autocompleted values,
(or any other open lists of autocompleted values:*/
closeAllLists();
});
a.appendChild(b);
}这段代码使用 indexOf 函数来查找 arr[i] 中是否包含 val。如果 indexOf 返回值大于 -1，则表示 arr[i] 包含 val，我们就创建一个包含匹配项的 DIV 元素。
3. 强制用户输入的内容必须是自动完成列表中的有效值
要强制用户输入的内容必须是自动完成列表中的有效值，我们需要添加输入验证逻辑。可以在表单提交时进行验证，或者在输入框失去焦点时进行验证。这里我们选择在输入框失去焦点时进行验证。
inp.addEventListener("blur", function(e) {
let valid = false;
for (let i = 0; i < fruitlist.length; i++) {
if (fruitlist[i] === this.value) {
valid = true;
break;
}
}
if (!valid) {
this.value = ""; // Clear the input if it's invalid
alert("Please select a valid fruit from the list.");
}
});这段代码添加了一个 blur 事件监听器，当输入框失去焦点时，它会检查输入框中的值是否在 fruitlist 中。如果不在，则清空输入框并显示警告信息。
完整代码示例
注意事项
- 性能: 对于大型数据集，模糊匹配可能会影响性能。可以考虑使用更高效的搜索算法或限制显示的选项数量。
- 用户体验: 确保自动完成列表的样式与你的网站风格一致。
- 可访问性: 确保自动完成功能对使用屏幕阅读器等辅助技术的用户是可访问的。
总结
通过修改 JavaScript 代码，我们成功地增强了 HTML 表单的自动完成功能，使其具备了光标悬停时显示所有选项、支持模糊匹配和强制输入验证的能力。这些改进可以显著提升用户体验，并确保用户输入的数据是有效的。 请记住，根据你的具体需求，你可能需要进一步调整代码。 例如，你可能需要添加错误处理、自定义样式或与其他 JavaScript 库集成。
