首页图书馆信息列表中有4本不同名称的编程书，筛选书籍并展示信息html 搜索栏

图书馆信息列表中有4本不同名称的编程书，筛选书籍并展示信息html 搜索栏

时间: 2024-09-14 09:08:40 浏览: 9

在HTML中，你可以创建一个简单的搜索栏让用户输入他们想查找的书籍名称，然后通过JavaScript或其他服务器端技术来处理搜索请求。下面是一个基本的示例： ```html <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>图书馆书籍搜索</title> <style> .search-form { margin-bottom: 20px; } </style> </head> <body> <div class="search-form"> <h2>图书搜索</h2> <input type="text" id="bookSearch" placeholder="请输入书籍名称..."> <button onclick="searchBooks()">搜索</button> </div>  <ul id="bookList"></ul> <script> function searchBooks() { const input = document.getElementById('bookSearch').value; let filteredBooks = []; // 假设这是从服务器获取的数据 // 在这里添加过滤逻辑，如果书籍名称包含用户输入，显示在#bookList中 if (filteredBooks.some(book => book.name.includes(input))) { filteredBooks.forEach(book => { const li = document.createElement('li'); li.textContent = `书名: ${book.name}`; document.getElementById('bookList').appendChild(li); }); } else { alert('未找到匹配的书籍。'); } } </script> </body> </html> ``` 在这个例子中，当用户点击搜索按钮时，`searchBooks`函数会被触发。这个函数获取用户输入的书籍名称，然后遍历预设的书籍列表（在这里我们假设有一个名为`filteredBooks`的数组）。如果书籍名称中包含了用户的搜索词，就将其添加到页面上的书目列表中。