输入框检索内容,html标签内检索

@{
ViewData["Title"] = $"验收部位";
}

<div class="row no-gutters align-items-center">
<div class="col-3">关键词查询:</div>
<div class="col-6 search_box"><input type="text" class="form-control" placeholder="请输入关键词" id="search">

</div>
<div class="col-1"></div>
<div class="col-2">
<button type="button" class="btn btn-primary btn-sm">新建</button>
</div>

</div>
<hr />
<div class="search_content search_default">
<ul class="list-group list-group-flush" id="childList">
<li class="list-group-item"><a>8轴交G轴</a></li>
<li class="list-group-item"><a>8轴交Y轴</a></li>
<li class="list-group-item"><a>8轴交J轴</a></li>
<li class="list-group-item"><a>8轴交H轴</a></li>
<li class="list-group-item"><a>8轴交U轴</a></li>
</ul>

</div>

@section styles{
}

@section scripts{
<script type="text/javascript">
$(function () {
var search_input = $(".search_box input"),
search_content = $(".search_content");
$(search_input).on("keyup", function () {
if (search_input.val() == '') {
$(search_content).show();
}
$(".search_content li:contains(" + search_input.val().trim() + ")").show();
$(".search_content li:not(:contains(" + search_input.val().trim() + "))").hide();



});
});

</script>

}

 

posted @ 2020-08-19 09:13  net开发人员  阅读(700)  评论(0编辑  收藏  举报