CSS使用not伪类实现列表内容过滤效果
4694次阅读
373人点赞
发布时间: 2024-05-30 09:25:33
扫码到手机查看
![]()
列表内容过滤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用CSS实现列表内容过滤功能</title>
<style>
#sortable {
list-style-type: none;
padding: 0;
margin: 0;
}
#sortable li {
margin: 5px;
padding: 5px;
border: 1px solid #ddd;
background-color: #f9f9f9;
cursor: move;
}
</style>
</head>
<body>
<input type="search" id="input" placeholder="输入城市名称或拼音" />
<ul>
<li data-search="思考,冥想">重庆市</li>
<li data-search="手机,信息">哈尔滨市</li>
<li data-search="橙色,手机">长春市</li>
</ul>
<script>
var eleStyle = document.createElement('style');
document.head.appendChild(eleStyle);
// 文本框输入
input.addEventListener("input", function() {
var value = this.value.trim();
eleStyle.innerHTML = value ? '[data-search]:not([data-search*="'+ value +'"]) { display: none; }' : '';
});
</script>
</body>
</html>在线体验：http://code.wubin.work/code/css/list-content-filter.html
搜索关键词在源码中，请自行查找。
目录