列表过滤器 - Jquery [英] List Filter - Jquery
问题描述
我有导航条搜索框（左侧菜单搜索）
需要添加搜索过滤功能，它应该搜索左侧窗格中的所有菜单项， - - Page是Bootstrap。
请帮助我这样做。我试过了，但它没有用。我正在查看包内容。
@ {
布局= null;
}
< ul class =nav nav-list>
< li class =divider>< / li>
< li>
< div class =input-group>
< input id =txtSearchPagetype =searchplaceholder =Search ../>
< / div>
@foreach（ViewBag.dtSection中的var部分）
{
< ul class =nav nav-pills nav-stacked>
< li class =active>
< a href =＃ style =background-color：＃01519C;data-toggle =collapsedata-target =＃@ Section.ItemArray [0]>
< span class =badge pull-right>< / span>
@ Section.ItemArray [0]
< / a>
< / li>
< div id =@ Section.ItemArray [0]class =collapse in>
< ul class =nav nav-list树>
@foreach（ViewBag.dtReport中的var报告）
{
if（@ Section.ItemArray [0] == @Report.ItemArray [0]）
{
< li>< a href =@ Url.Action（masterdr =，report =，new {id = Report。 ItemArray [2]}）> @ Report.ItemArray [1]< span class =badge pull-right>< / span> < / a>< / li>
}
}
< / ul>
< / div>
< / ul>
}
< script class =cssdecksrc =// cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js\"></script/ >
< script class =cssdecksrc =// cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js\"> ;< / script>
< script type =text / javascript> ;;
$（document）.ready（function（）{
$（'label.tree-toggler'）。click（function（）{
$（this）。 parent（）。children（'ul.tree'）。toggle（300）;
}）;
}）;< / script>
< script type =text / javascript>
$（＃txtSearchPage）。keyup（function （）{
var search = $（this）.val（）;
$（ul.nav nav-list tree）。show（）;
if（search）$（ ul.nav nav-list tree）。not（：contains（+ search +））。hide（）;
}）;
< / script>
I have nav bar search box(left menu search)
Need to add search filter functionality,it should search all the menu items in the left pane,-- Page is Bootstrap.
Kindly help me to do this.I have tried, But it is not working. I am getting contents over view bag.
@{
Layout = null;
}
<ul class="nav nav-list">
<li class="divider"></li>
<li>
<div class="input-group">
< input id="txtSearchPage" type="search" placeholder="Search.."/>
</div>
@foreach (var Section in ViewBag.dtSection)
{
<ul class="nav nav-pills nav-stacked">
<li class="active ">
<a href="#" style="background-color: #01519C; " data-toggle="collapse" data-target="#@Section.ItemArray[0]">
<span class="badge pull-right"></span>
@Section.ItemArray[0]
</a>
</li>
<div id="@Section.ItemArray[0]" class="collapse in">
<ul class="nav nav-list tree">
@foreach (var Report in ViewBag.dtReport)
{
if (@Section.ItemArray[0] == @Report.ItemArray[0])
{
<li><a href="@Url.Action(" masterdr=", " report=", new { id = Report.ItemArray[2] })">@Report.ItemArray[1] <span class="badge pull-right"></span> </a></li>
}
}
</ul>
</div>
</ul>
}
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script/>
<script class="cssdeck" src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">;
$(document).ready(function () {
$('label.tree-toggler').click(function () {
$(this).parent().children('ul.tree').toggle(300);
});
});</script>
<script type="text/javascript">
$("#txtSearchPage").keyup(function () {
var search = $(this).val();
$("ul.nav nav-list tree").show();
if (search) $("ul.nav nav-list tree").not(":contains(" + search + ")").hide();
});
</script>
推荐答案
（document）.ready（function（）{
(document).ready(function () {
（'label.tree -toggler'）。click（function（）{
('label.tree-toggler').click(function () {
（this）.parent（）。children（'ul.tree'）。toggle（300）;
}）;
}）;< / script>
< ; script type =text / javascript>
(this).parent().children('ul.tree').toggle(300);
});
});</script>
<script type="text/javascript">
这篇关于列表过滤器 - Jquery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
