前端实时搜索功能是一种常见的用户交互需求，它能够帮助用户快速找到并过滤出所需的数据。本文将介绍如何使用前端技术（HTML、CSS和JavaScript）来实现一个简单的实时搜索功能。
1. HTML结构
我们首先需要创建一个基本的HTML结构，包括一个搜索框和一个数据列表，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>实时搜索功能</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>实时搜索功能</h1>
<input type="text" id="search-box" placeholder="输入关键词搜索">
<ul id="data-list"></ul>
<script src="script.js"></script>
</body>
</html>
我们为搜索框和数据列表分别设置了id属性，以便之后在JavaScript中进行操作。
2. CSS样式
为了美化页面并使其更符合用户习惯，我们可以为搜索框和数据列表添加一些CSS样式。新建一个style.css文件，并将以下样式添加到其中：
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
}
h1 {
margin-bottom: 20px;
}
#search-box {
width: 300px;
height: 30px;
padding: 5px;
}
#data-list {
list-style-type: none;
}
#data-list li {
padding: 10px;
border-bottom: 1px solid #ebebeb;
}
#data-list li:last-child {
border-bottom: none;
}
.highlight {
background-color: #ffff66;
}
这里我们设置了页面的字体样式、间距，并为搜索框设置了固定的宽度和高度。数据列表使用无序列表ul来展示，并对列表项li设置了一些边距和边框样式。我们还为高亮效果设置了一个.highlight类。
3. JavaScript逻辑
在script.js文件中，我们将实现实时搜索的逻辑。首先，我们需要获取搜索框和数据列表的DOM元素，并为搜索框添加input事件监听器：
const searchBox = document.getElementById('search-box');
const dataList = document.getElementById('data-list');
searchBox.addEventListener('input', () => {
const keyword = searchBox.value.trim().toLowerCase();
updateDataList(keyword);
});
这里使用了trim()函数去除搜索框内容的首尾空格，并使用toLowerCase()方法将关键词转换为小写字母，以便进行不区分大小写的搜索。
接下来，我们需要实现更新数据列表的函数updateDataList(keyword)：
function updateDataList(keyword) {
while (dataList.firstChild) {
dataList.removeChild(dataList.firstChild);
}
if (keyword === '') {
return;
}
const filteredData = searchData(keyword);
filteredData.forEach((item) => {
const li = document.createElement('li');
li.textContent = item.text;
dataList.appendChild(li);
});
}
这里的逻辑比较简单。首先，我们清空数据列表中的所有列表项。然后，如果关键词为空，直接返回，不需要进行搜索。接下来，我们调用searchData()函数来获取根据关键词过滤后的数据，并遍历数据列表，创建新的列表项并添加到DOM中。
最后，我们需要实现searchData(keyword)函数来模拟后端数据的搜索过程：
function searchData(keyword) {
const data = [
{ id: 1, text: 'Apple' },
{ id: 2, text: 'Banana' },
{ id: 3, text: 'Orange' },
{ id: 4, text: 'Pineapple' },
{ id: 5, text: 'Watermelon' },
{ id: 6, text: 'Grapes' },
{ id: 7, text: 'Strawberry' },
{ id: 8, text: 'Mango' },
{ id: 9, text: 'Kiwi' },
{ id: 10, text: 'Peach' }
];
return data.filter(item => item.text.toLowerCase().includes(keyword));
}
这里我们定义了一个包含了一些水果数据的数组，并使用filter()方法根据关键词对数据进行过滤，返回包含关键词的数据项。
现在我们已经完成了前端实时搜索功能的实现。可以在浏览器中打开HTML文件，输入关键词即可实时过滤出匹配的数据列表。搜索框支持模糊搜索和不区分大小写的搜索，可以根据实际需求进行优化和扩展。
本文来自极简博客，作者：清风细雨，转载请注明原文链接：实现前端实时搜索功能
