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

在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);  });  
}

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/822754.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！