用JavaScript写出具有搜索和筛选功能的界面
时间: 2024-02-01 19:16:59 浏览: 23
好的,下面是一个简单的示例代码,实现了搜索和筛选功能:
HTML部分:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>搜索和筛选</title>
</head>
<body>
<h1>商品列表</h1>
<input type="text" id="search" placeholder="搜索商品名称">
<select id="filter">
<option value="">全部</option>
<option value="电子产品">电子产品</option>
<option value="家具">家具</option>
<option value="服装">服装</option>
</select>
<ul id="list">
<li>手机<span> - 电子产品</span></li>
<li>电视<span> - 电子产品</span></li>
<li>沙发<span> - 家具</span></li>
<li>衣服<span> - 服装</span></li>
<li>鞋子<span> - 服装</span></li>
<li>桌子<span> - 家具</span></li>
</ul>
<script src="script.js"></script>
</body>
</html>
```
JavaScript部分:
```javascript
const searchInput = document.getElementById('search');
const filterSelect = document.getElementById('filter');
const itemList = document.getElementById('list');
const items = itemList.getElementsByTagName('li');
// 搜索功能
searchInput.addEventListener('keyup', function() {
const filter = searchInput.value.toUpperCase();
for (let i = 0; i < items.length; i++) {
const item = items[i];
const text = item.textContent.toUpperCase();
if (text.indexOf(filter) > -1) {
item.style.display = '';
} else {
item.style.display = 'none';
}
}
});
// 筛选功能
filterSelect.addEventListener('change', function() {
const filter = filterSelect.value.toUpperCase();
for (let i = 0; i < items.length; i++) {
const item = items[i];
const text = item.lastElementChild.textContent.toUpperCase();
if (filter === '' || text.indexOf(filter) > -1) {
item.style.display = '';
} else {
item.style.display = 'none';
}
}
});
```
以上代码实现了以下功能:
1. 输入框可以根据输入的文本搜索商品名称;
2. 下拉框可以选择商品类别进行筛选;
3. 商品名称和类别都是大小写不敏感的。
希望对你有所帮助!