Search Box filter in Javascript/jquery

Question

Background
HTML Page having navigation on left and body on right. In Navigation, five tabs are there. ul is being used and several li elements exists in each vertical tab. Each vertical tab has search box to filter the data.

1) HTML Code

<h3>First</h3>
<div>
    <input type="text" id="Searchtab1" />   
     <ul id="Firstul">
        <li>Germany</li>
        <li>France</li>
        <li>Sydney</li>    
     </ul>
</div>

Script code

$("#Searchtab1").on("keyup click input", function () {
if (this.value.length > 0) {
  $("#Firstul li").hide().filter(function () {
    return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)==  0;

  }).show();

}
else {
  $("#Firstul li").show();
}

Similarly there are five vertical navigation tab has similar code. Now the problem is there is one requirement to have one global search box on top of these searches i.e. One search box on top of HTML which will filter all navigation tabs. User can further filter on individual tabs. Basic filter is working fine when i search again on individual navigation it lists all elements again. Basically the global search takes precedence followed by local search, it should be able to handle case when user changes anything on Globalsearch/local search, it should change by considering the both search options(global first)

This is what i have tried
FiddleLink Can someone suggest how to correct this.

Answer 1

Have you tried something like this JSFIDDLE? Link: https://jsfiddle.net/umaar/t82gZ/

HTML

<form id="live-search" action="" class="styled" method="post">
<fieldset>
    <input type="text" class="text-input" id="filter" value="" />
    <span id="filter-count"></span>
</fieldset>
</form>

<nav>
    <ul>
    <li><a href="#">Jim James</a></li>
    <li><a href="#">Hello Bye</a></li>
    <li><a href="#">Wassup Food</a></li>
    <li><a href="#">Contact Us</a></li>
    <li><a href="#">Bleep bloop</a></li>
    <li><a href="#">jQuery HTML</a></li>
    <li><a href="#">CSS HTML AJAX</a></li>
    <li><a href="#">HTML5 Net Set</a></li>
    <li><a href="#">Node Easy</a></li>
    <li><a href="#">Listing Bloop</a></li>
    <li><a href="#">Contact HTML5</a></li>
    <li><a href="#">CSS3 Ajax</a></li>
    <li><a href="#">ET</a></li>
 </ul>
</nav>}

JavaScript

$(document).ready(function(){
 $("#filter").keyup(function(){

    // Retrieve the input field text and reset the count to zero
    var filter = $(this).val(), count = 0;

    // Loop through the comment list
    $("nav ul li").each(function(){

        // If the list item does not contain the text phrase fade it out
        if ($(this).text().search(new RegExp(filter, "i")) < 0) {
            $(this).fadeOut();

        // Show the list item if the phrase matches and increase the count by 1
        } else {
            $(this).show();
            count++;
        }
    });

    // Update the count
    var numberItems = count;
    $("#filter-count").text("Number of Comments = "+count);
   });
});

Granted this isn't your exact answer, made for just you! But I created that fiddle and maybe it can help you! If you want a different fiddle see the above answer! (EchoSin's)

     $("#Searchtab1").on("keyup input", function () {
   if (this.value.length > 0) {
$(".alluls").each(function(){
$(this).children().hide().filter(function () {
return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)==  0;

}).show();
});
  }
else {
 $(".alluls li").show();
   } 

https://jsfiddle.net/EchoSin/p5jxB/6/

Answer 2

Try this: Add class (alluls) for all ul elems (or use some jquery selector to select them) and:

$("#Searchtab1").on("keyup input", function () {
if (this.value.length > 0) {
  $(".alluls").each(function(){
      $(this).children().hide().filter(function () {
        return $(this).text().toLowerCase().lastIndexOf($("#Searchtab1").val().toLowerCase(),0)==  0;

      }).show();
  });

}
else {
  $(".alluls li").show();
}

Edit: removed click event

http://jsfiddle.net/EchoSin/p5jxB/6/