帮我写一个前端模糊搜索代码
时间: 2023-09-03 13:25:05 浏览: 72
### 回答1:
好的,以下是一个简单的前端模糊搜索代码示例:
HTML 代码:
```
<input type="text" id="searchInput" placeholder="请输入搜索关键词">
<ul id="searchList">
<li>搜索结果1</li>
<li>搜索结果2</li>
<li>搜索结果3</li>
<li>搜索结果4</li>
<li>搜索结果5</li>
</ul>
```
JavaScript 代码:
```
const searchInput = document.getElementById('searchInput');
const searchList = document.getElementById('searchList');
const listItems = searchList.getElementsByTagName('li');
searchInput.addEventListener('input', function() {
const searchTerm = searchInput.value.toLowerCase();
for (let i = ; i < listItems.length; i++) {
const text = listItems[i].textContent.toLowerCase();
if (text.indexOf(searchTerm) === -1) {
listItems[i].style.display = 'none';
} else {
listItems[i].style.display = 'block';
}
}
});
```
这段代码会监听输入框的输入事件,当用户输入关键词时,会遍历搜索结果列表中的每一项,如果该项的文本内容中包含了用户输入的关键词,则显示该项,否则隐藏该项。
### 回答2:
这是一个简单的前端模糊搜索代码示例:
HTML部分:
```
<input type="text" id="searchInput" placeholder="输入搜索关键词">
<ul id="searchList"></ul>
```
JavaScript部分:
```
const data = ['苹果', '香蕉', '橙子', '草莓', '蓝莓', '樱桃', '橘子', '柠檬'];
const searchInput = document.getElementById('searchInput');
const searchList = document.getElementById('searchList');
searchInput.addEventListener('input', function() {
const searchValue = this.value.toLowerCase(); // 获取搜索关键词并转为小写
// 清空搜索结果列表
searchList.innerHTML = '';
// 遍历数据数组,匹配搜索关键词并显示匹配结果
data.forEach(function(item) {
const lowerItem = item.toLowerCase();
if (lowerItem.includes(searchValue)) {
const li = document.createElement('li');
li.textContent = item;
searchList.appendChild(li);
}
});
});
```
以上代码会在用户输入搜索关键词时,动态地将与关键词匹配的数据项显示在一个无序列表中。模糊搜索是基于包含关系进行匹配,即只要数据项中包含了搜索关键词的部分,即可认为匹配成功。在实际应用中,可以根据需求进行相应的修改和优化。
### 回答3:
当然可以帮您编写一个前端模糊搜索的代码。下面是一个简单的实现示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>前端模糊搜索示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<input id="searchInput" type="text" placeholder="输入搜索关键词" />
<ul id="resultList"></ul>
<script>
// 模拟的数据源
var data = [
"苹果",
"香蕉",
"橙子",
"草莓",
"西瓜",
"哈密瓜"
];
// 绑定搜索框的输入事件
$('#searchInput').on('input', function() {
var inputValue = $(this).val().trim().toLowerCase();
var resultList = $('#resultList');
// 清空搜索结果列表
resultList.empty();
// 遍历数据源,查找匹配的关键词
for (var i = 0; i < data.length; i++) {
var item = data[i].toLowerCase();
if (item.indexOf(inputValue) !== -1) {
// 如果关键词存在于数据项中,则将其添加到结果列表
resultList.append('<li>' + data[i] + '</li>');
}
}
});
</script>
</body>
</html>
```
以上代码实现了一个简单的前端模糊搜索功能。用户在搜索框中输入关键词时,代码会遍历数据源,并将匹配的结果显示在一个无序列表中。数据源可以根据实际需要进行替换,搜索时会忽略大小写。请将以上代码复制到一个HTML文件中,并在浏览器中打开查看效果。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)