首页html用搜索框搜索列表

html用搜索框搜索列表

时间: 2023-07-20 21:12:43 浏览: 144

好的，以下是一个使用HTML实现搜索框搜索列表的示例： ```html <!DOCTYPE html> <html> <head> <title>搜索列表示例</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2>搜索列表示例</h2> <input type="text" id="search-input" placeholder="输入关键词搜索"> <button id="search-btn">搜索</button> <ul id="list"> <li>苹果</li> <li>香蕉</li> <li>橙子</li> <li>梨子</li> <li>西瓜</li> </ul> <script> // 获取搜索框和按钮元素 var searchInput = document.getElementById('search-input'); var searchBtn = document.getElementById('search-btn'); // 获取列表元素 var list = document.getElementById('list'); // 绑定事件 searchBtn.onclick = function() { // 获取搜索关键词 var keyword = searchInput.value.trim().toLowerCase(); // 遍历列表 for (var i = 0; i < list.children.length; i++) { var li = list.children[i]; // 判断元素是否包含关键词 if (li.innerText.toLowerCase().indexOf(keyword) >= 0) { // 显示元素 li.style.display = ''; } else { // 隐藏元素 li.style.display = 'none'; } } }; </script> </body> </html> ``` 在这个示例中，我们首先创建了一个搜索框和一个搜索按钮，以及一个包含若干列表项的无序列表。然后，在JavaScript中，我们获取了搜索框、搜索按钮和列表元素，并为搜索按钮绑定了一个事件处理程序，当用户点击搜索按钮时，我们获取搜索框中的关键词，遍历列表中的每个元素，判断是否包含关键词，然后根据判断结果显示或隐藏元素。最终，我们实现了一个搜索列表的功能。

阅读全文