您可以使用
HTML和JavaScript来
实现这个功能。下面是一个简单的例子：
```
html
<!DOCTYPE
html>
<
html>
<head>
<title>搜索框
提示词</title>
<style>
#search-box {
position: relative;
display: inline-block;
}
#search-box input[type="text"] {
padding-right: 40px;
width: 200px;
}
#search-box ul {
position: absolute;
top: 100%;
left: 0;
z-index: 10;
background-color: #fff;
border: 1px solid #ccc;
list-style: none;
margin: 0;
padding: 0;
display: none;
max-height: 200px;
overflow-y: auto;
}
#search-box li {
padding: 5px;
cursor: pointer;
}
#search-box li:hover {
background-color: #f5f5f5;
}
</style>
</head>
<body>
<div id="search-box">
<input type="text" id="search-input" placeholder="搜索">
<ul id="search-results"></ul>
</div>
<script>
// 假设这是您的
提示词列表
var words = ["苹果", "香蕉", "橘子", "草莓", "蓝莓", "猕猴桃", "西瓜", "芒果"];
var input = document.getElementById("search-input");
var results = document.getElementById("search-results");
// 监听
输入框的
输入事件
input.addEventListener("input", function() {
var value = input.value.trim().toLowerCase();
results.inner
HTML = "";
if (value.length === 0) {
results.style.display = "none";
return;
}
// 遍历
提示词列表，找到匹配的项
words.forEach(function(word) {
if (word.toLowerCase().indexOf(value) === 0) {
var li = document.createElement("li");
li.textContent = word;
li.addEventListener("click", function() {
input.value = word;
results.style.display = "none";
});
results.appendChild(li);
}
});
if (results.children.length > 0) {
results.style.display = "block";
} else {
results.style.display = "none";
}
});
// 监听
输入框的聚焦和失焦事件
input.addEventListener("focus", function() {
if (results.children.length > 0) {
results.style.display = "block";
}
});
input.addEventListener("blur", function() {
results.style.display = "none";
});
// 监听键盘事件，
实现上下键选择
提示词
input.addEventListener("keydown", function(e) {
if (e.keyCode === 38) { // 上箭头
var selected = results.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
if (selected.previousSibling) {
selected = selected.previousSibling;
} else {
selected = results.lastChild;
}
} else {
selected = results.lastChild;
}
selected.classList.add("selected");
input.value = selected.textContent;
e.preventDefault();
} else if (e.keyCode === 40) { // 下箭头
var selected = results.querySelector(".selected");
if (selected) {
selected.classList.remove("selected");
if (selected.nextSibling) {
selected = selected.nextSibling;
} else {
selected = results.firstChild;
}
} else {
selected = results.firstChild;
}
selected.classList.add("selected");
input.value = selected.textContent;
e.preventDefault();
} else if (e.keyCode === 13) { // 回车键
var selected = results.querySelector(".selected");
if (selected) {
input.value = selected.textContent;
results.style.display = "none";
}
}
});
</script>
</body>
</
html>
```
这里使用了一个 `ul` 元素作为
提示词列表，当
输入框输入时通过 JavaScript 动态生成并显示这个列表，用户可以通过
鼠标点击或键盘选择列表项，也可以直接
输入搜索词。
1107
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
