<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<style>
.uls{
width: 100%;
height: auto;
}
.uls li{
width: 100%;
height: 30px;
background: pink;
padding: 10px 10px;
margin-bottom: 10px;
}
.seach-btn{
width: 50px;
height: 20px;
background-color: red;
color:#fff;
}
.mui-hidden{
display: none;
}
</style>
<body>
<div id='div1'>
<div class="seach">
<input id="searCh" type="text" placeholder="请输入"/>
<div class="seach-btn">搜索</div>
</div>
<ul class="uls">
<li class="lis-lis">
<span class="appNo">123</span>
<span class="lis-lef">低压新装</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">234</span>
<span class="lis-lef">低压新装1</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">456</span>
<span class="lis-lef">低压新装2</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">789</span>
<span class="lis-lef">低压新装3</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">789</span>
<span class="lis-lef">低压新装3</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">789</span>
<span class="lis-lef">低压新装3</span>
<div>我是div</div>
</li>
<li class="lis-lis">
<span class="appNo">789</span>
<span class="lis-lef">高压新装3</span>
<div>我是div</div>
</li>
</ul>
</div>
<script src='js/jquery-3.2.1.min.js'></script>
<script>
$(function(){
$('.seach-btn').on('click',function(){
isGrabbles();
});
})
function isGrabbles() { // 工单页搜索 流程名称/申请编号
//定义一个变量来判断是否弹出查询结果不存在
var tan = false;
var grabbles = $('#searCh').val(); // 搜索框内容
if (!grabbles) {
$('.lis-lis').removeClass('mui-hidden');
return tan= true;
}else{
$('.lis-lis').addClass('mui-hidden');
$('.lis-lis').each(function(i, el) {
var appNo = $(el).find('.appNo').text();
console.log(appNo);
var name = $(el).find('.lis-lef').text();
if (appNo == grabbles || name.indexOf(grabbles) != -1) {
$(el).removeClass('mui-hidden');
tan = true
}
});
};
if (tan == false) {
$('.lis-lis').addClass('mui-hidden');
alert('查询结果不存在');
}
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
