本文将指导你如何使用Javascript实现一个具有智能搜索提示和数据验证功能的Autocomplete组件。该组件能够在用户输入时提供匹配的选项，支持在字符串的任意位置进行匹配，并且可以限制用户输入，只允许选择预定义的选项。
1. HTML结构
首先，我们需要一个HTML结构来容纳输入框和Autocomplete列表。
<div class="autocomplete"> <input id="myInput" type="text" name="myCountry" placeholder="输入国家名称"></div>登录后复制
2. Javascript实现Autocomplete功能
接下来，我们将使用Javascript来实现Autocomplete的核心功能。
2.1 显示所有选项
要实现当光标位于空字段时显示所有选项，我们需要修改input事件监听器。当输入框为空时，显示整个列表。
inp.addEventListener("input", function(e) { var a, b, i, val = this.value; closeAllLists(); if (!val) { // 显示所有选项 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); } 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 匹配任意位置的字符串
要实现匹配字符串中任意位置的功能，我们需要修改匹配逻辑。不再使用substr()，而是使用indexOf()来检查匹配项。
芦笋演示 一键出成片的录屏演示软件，专为制作产品演示、教学课程和使用教程而设计。
34 查看详情 
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列表中的值，我们需要在表单提交前进行验证，或者在每次输入后进行验证。这里提供一个简单的输入验证方法。
inp.addEventListener("blur", function() { let currentValue = this.value; let isValid = false; for (let i = 0; i < arr.length; i++) { if (arr[i] === currentValue) { isValid = true; break; } } if (!isValid) { this.value = ""; // 清空输入框 alert("请输入有效的水果名称"); // 提示用户 }});登录后复制这段代码在输入框失去焦点时（blur事件）触发，检查输入的值是否在fruitlist数组中。如果不在，则清空输入框并提示用户。
2.4 完整的Javascript代码
function autocomplete(inp, arr) { var currentFocus; inp.addEventListener("input", function(e) { var a, b, i, val = this.value; closeAllLists(); if (!val) { // 显示所有选项 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); } 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); }); inp.addEventListener("blur", function() { let currentValue = this.value; let isValid = false; for (let i = 0; i < arr.length; i++) { if (arr[i] === currentValue) { isValid = true; break; } } if (!isValid) { this.value = ""; alert("请输入有效的水果名称"); }});}var fruitlist = [ "Apple", "Mango", "Pear", "Banana", "Berry"];autocomplete(document.getElementById("myFruitList"), fruitlist);登录后复制3. CSS样式
为了使Autocomplete列表看起来更美观，我们可以添加一些CSS样式。
.autocomplete { position: relative; display: inline-block;}.autocomplete-items { position: absolute; border: 1px solid #d4d4d4; border-bottom: none; border-top: none; z-index: 99; top: 100%; left: 0; right: 0;}.autocomplete-items div { padding: 10px; cursor: pointer; background-color: #fff; border-bottom: 1px solid #d4d4d4;}.autocomplete-items div:hover { background-color: #e9e9e9;}.autocomplete-active { background-color: DodgerBlue !important; color: #fff;}登录后复制4. 总结
通过以上步骤，我们实现了一个具有智能搜索提示和数据验证功能的Autocomplete组件。这个组件可以在用户输入时提供匹配的选项，支持在字符串的任意位置进行匹配，并且可以限制用户输入，只允许选择预定义的选项。你可以根据自己的需求，进一步扩展和优化这个组件。
注意事项
在实际应用中，可以考虑使用节流或防抖技术来优化输入事件的处理，减少不必要的计算。可以从服务器端获取Autocomplete列表，以支持更大的数据集。可以添加更多的验证规则，例如检查输入是否为空，或者是否符合特定的格式。为了更好的用户体验，可以添加键盘导航功能，允许用户使用键盘上下键选择Autocomplete列表中的选项。以上就是实现智能搜索提示与数据验证的Autocomplete组件教程的详细内容，更多请关注php中文网其它相关文章！
