验证自动完成(Autocomplete)是一种用户界面功能,它根据用户输入的内容动态显示可能的匹配项,从而帮助用户快速选择或输入所需的信息。当用户在一个输入框中输入文本时,系统会根据已有的数据源或算法生成一个下拉菜单,显示与输入文本匹配的建议项。
当尝试实现自动完成功能时,可能会遇到同时激活两个菜单的问题。这通常是由于事件处理不当或状态管理混乱导致的。
以下是一个简单的示例代码,展示如何使用JavaScript和CSS实现自动完成功能,并避免同时激活两个菜单的问题。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Autocomplete Example</title>
<style>
.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;
}
</style>
</head>
<body>
<input type="text" id="autocompleteInput">
<div id="autocomplete-list" class="autocomplete-items"></div>
<script>
const input = document.getElementById('autocompleteInput');
const list = document.getElementById('autocomplete-list');
let currentFocus = -1;
input.addEventListener('input', function(e) {
const value = this.value;
if (!value) {
list.innerHTML = '';
return;
}
// Simulate fetching data from a server
const data = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'].filter(item => item.toLowerCase().startsWith(value.toLowerCase()));
list.innerHTML = '';
data.forEach(item => {
const div = document.createElement('div');
div.innerHTML = `<strong>${item.substr(0, value.length)}</strong>${item.substr(value.length)}`;
div.addEventListener('click', function(e) {
input.value = item;
list.innerHTML = '';
currentFocus = -1;
});
list.appendChild(div);
});
currentFocus = -1;
});
input.addEventListener('keydown', function(e) {
const items = list.getElementsByTagName('div');
if (e.keyCode === 40) { // Down arrow
currentFocus++;
setActive(items);
} else if (e.keyCode === 38) { // Up arrow
currentFocus--;
setActive(items);
} else if (e.keyCode === 13) { // Enter
e.preventDefault();
if (currentFocus > -1) {
items[currentFocus].click();
}
}
});
function setActive(items) {
removeActive(items);
if (currentFocus >= items.length) {
currentFocus = 0;
}
if (currentFocus < 0) {
currentFocus = items.length - 1;
}
items[currentFocus].classList.add('autocomplete-active');
}
function removeActive(items) {
for (let i = 0; i < items.length; i++) {
items[i].classList.remove('autocomplete-active');
}
}
</script>
</body>
</html>
通过上述代码和解释,你应该能够理解自动完成功能的基础概念、优势、类型、应用场景,并解决同时激活两个菜单的问题。
领取专属 10元无门槛券
手把手带您无忧上云