JS如何配合input框实现模糊搜索

北原_春希

于 2024-04-17 11:54:52 发布

阅读量556

点赞数 14

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/ggq53219/article/details/137867097

版权

在JavaScript中，实现一个模糊搜索的搜索框功能，通常需要以下几个步骤：

创建一个HTML输入框和一个显示搜索结果的元素。
监听输入框的input事件，当用户输入时触发搜索。
在事件处理函数中，根据用户输入的关键词进行模糊搜索。
更新显示搜索结果的元素。

以下是一个简单的示例代码：

HTML部分：

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta charset="UTF-8">  
    <meta name="viewport" content="width=device-width, initial-scale=1.0">  
    <title>模糊搜索示例</title>  
</head>  
<body>  
    <input type="text" id="searchInput" placeholder="输入关键词进行搜索...">  
    <ul id="searchResults"></ul>  
  
    <script src="script.js"></script>  
</body>  
</html>

JavaScript部分 (`script.js`)：

// 假设这是你的原始数据，实际应用中可能从服务器获取或从其他数据源获取  
const data = [  
    { id: 1, name: '苹果' },  
    { id: 2, name: '香蕉' },  
    { id: 3, name: '橙子' },  
    { id: 4, name: '桃子' },  
    // ...更多数据  
];  
  
const searchInput = document.getElementById('searchInput');  
const searchResults = document.getElementById('searchResults');  
  
// 监听输入框的input事件  
searchInput.addEventListener('input', function(event) {  
    const query = event.target.value.trim().toLowerCase(); // 获取用户输入的关键词，并转换为小写以便进行不区分大小写的搜索  
    const filteredData = data.filter(item => item.name.toLowerCase().includes(query)); // 根据关键词进行模糊搜索，返回匹配项数组  
    displaySearchResults(filteredData); // 显示搜索结果  
});  
  
function displaySearchResults(data) {  
    // 清空之前的搜索结果  
    searchResults.innerHTML = '';  
  
    // 遍历匹配项数组，创建对应的li元素并添加到ul中  
    data.forEach(item => {  
        const li = document.createElement('li');  
        li.textContent = item.name; // 显示名称，你也可以根据需要显示其他信息  
        searchResults.appendChild(li);  
    });  
}

这个示例中，我们创建了一个包含一些水果名称的数据数组。当用户在搜索框中输入时，我们会根据用户输入的关键词对数据进行模糊搜索，并将匹配的结果显示在下方的列表中。注意，这个示例是简单的客户端搜索，对于大型数据集或需要实时更新的数据，你可能需要考虑使用服务器端搜索或其他更高效的技术。