js写一个搜索框检索控件
时间: 2024-02-24 19:56:57 浏览: 19
好的,以下是一个简单的搜索框检索控件的实现,使用了JavaScript和HTML:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索框检索控件</title>
</head>
<body>
<input type="text" id="searchBox" onkeyup="search()" placeholder="输入关键词...">
<ul id="searchResults"></ul>
<script>
function search() {
// 获取输入框中的关键词
var keyword = document.getElementById("searchBox").value.toLowerCase();
// 获取需要检索的内容,这里是一个数组,可以是从后台获取的数据
var items = ["苹果", "香蕉", "橙子", "西瓜", "芒果", "草莓", "葡萄", "菠萝"];
// 清空搜索结果列表
document.getElementById("searchResults").innerHTML = "";
// 遍历所有内容,匹配关键词
for (var i = 0; i < items.length; i++) {
if (items[i].toLowerCase().indexOf(keyword) !== -1) {
// 如果匹配成功,将该项添加到搜索结果列表中
var li = document.createElement("li");
li.appendChild(document.createTextNode(items[i]));
document.getElementById("searchResults").appendChild(li);
}
}
}
</script>
</body>
</html>
```
这个搜索框控件包含一个文本输入框和一个无序列表,用户输入关键词后,将会遍历一个预定义的数组,匹配关键词并将匹配成功的项添加到搜索结果列表中。这个实现比较简单,可以根据实际需求进行扩展和优化。