List Filter - Jquery

Question

1.00/5 (2 votes)

See more:

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>

Posted 10-Nov-14 8:10am

PrakashK347

Updated 13-Nov-14 3:10am

v10

Add a Solution

Comments

Manas Bhardwaj 10-Nov-14 14:14pm

any effort?

PrakashK347 11-Nov-14 10:32am

[Code moved to the question — SA]

Sergey Alexandrovich Kryukov 10-Nov-14 14:28pm

What have you tried so far?
—SA

PrakashK347 11-Nov-14 10:31am

Thnx..This is my code, Getting content in dynamic way.
[Code moved to the question — SA]

Sergey Alexandrovich Kryukov 11-Nov-14 10:40am

Could you move this code (poorly readable) to the answer, using "Improve question".
Format it properly, using the "pre" tags.
—SA

PrakashK347 11-Nov-14 10:48am

Done:)

Sergey Alexandrovich Kryukov 11-Nov-14 12:46pm

Great, thank you...
—SA

PrakashK347 11-Nov-14 12:48pm

Its not working:(
typo error..sry sry..

Sergey Alexandrovich Kryukov 11-Nov-14 12:51pm

Really? So do you mean that you actually did not have any real problem?
—SA

PrakashK347 12-Nov-14 6:23am

Its not working..typo error..sry

SRS(The Coder) 12-Nov-14 2:40am

:-)

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Satish kumar Vadlavalli · Answer 1 · 2014-11-11T18:57:00

Try this.

Create a text box with id as searchText and implement your own search method.

C#

$('#searchbutton').click(search);
$('#SearchText').keypress(function(e){
     var code = (e.keyCode ? e.keyCode : e.which);
      if(code == 13) {
        search()
      }
});


function search(){
    var client = document.getElementById('SearchText').value;
            var textbox = document.getElementById('SearchText');
            var edittext = ", is not available!";
            var result = client + edittext;

            if (textbox.value == 'Search...') {
                alert('Please enter a Client Name to search for ');
                textbox.focus();
            }
            else {
                alert(result);
            };
}