How do I perform a conditional check for all next visible table rows?
<p>I have some javascript that is fired when the user clicks inside the text input field and presses either the down or up arrow keys. The purpose of this functionality is to search tables values and then to be able to press the down and up arrow keys to select one. I've got it working good but the only problem I'm having is that when the user gets to the last visible table row and presses down again, the highlighted table row disappears. What I would like to happen is when the user gets to the last table row and presses down again, I would like for the very first visible table row to be highlighted so that the user can begin keying down the visible table rows again. Here is the relavent code:</p>

<p>//javascript</p>

<pre><code>$(function(){
    $("#main").on("keyup", "#search", function(e){
    e.preventDefault();
    searchTable($(this).val());
    });

    $("#main").on("keydown", "#search", hoverDown);
});

function hoverDown(e) {
    var $tbl = $('#tblDataBody');
    var $cur = $('.active', $tbl).removeClass('active').first();


if (e.keyCode === 40) { //down
  if ($cur.length) {

        // here is where we need to check to see if we are on the last one
        // and if we are we need to remove class active and add class active 
        // to the first visible table row
      $cur.nextAll(':visible:first').addClass('active');

        var $current = $('.active', $tbl).nextAll(':visible');
          console.log($current.length);

  } else {
      $("#tblDataBody tr:visible:first").addClass('active');
      console.log("down else");
  }
} else if (e.keyCode == 38) { //up
      e.preventDefault();
  if ($cur.length) {
      $cur.prevAll(':visible:first').addClass('active');
      console.log($cur);
  } else {
      $tbl.children().last().addClass('active');
  }
} else if (e.keyCode == 13) {
  if ($cur.length) {
        // manually invoke pjax after enter has been pressed
      var $url = $cur.find("a").attr("href");
      $.pjax({url: $url, container: '#main'});
  }
}
}
function searchTable(inputVal)
{

    var table = $('#tblData');
    table.find('tr').each(function(index, row)
    {
        var allCells = $(row).find('td');
        if(allCells.length &gt; 0)
        {
            var found = false;
            allCells.each(function(index, td)
            {
                var regExp = new RegExp(inputVal, 'i');
                if(regExp.test($(td).text()))
                {
                    found = true;
                    return false;
                }
            });
            if(found == true)$(row).show();else $(row).hide();
        }

    });

}
</code></pre>

<p>//HTML</p>

<pre><code>&lt;div id="main"&gt;
&lt;input type="text" class="table-search" id="search" autocomplete="off"   placeholder="Search Clients…"&gt;
&lt;table class="table" id="tblData"&gt;
&lt;thead&gt;&lt;tr&gt;&lt;th&gt;Name&lt;/th&gt; &lt;th&gt;Title&lt;/th&gt;&lt;/tr&gt;&lt;/thead&gt;
&lt;tbody id="tblDataBody"&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Scott&lt;/a&gt;&lt;/td&gt; &lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Billy&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;George&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Sara&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;John&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Megan&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Ben&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Jully&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Bethany&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Alen&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Jane&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;
&lt;tr&gt;&lt;td&gt;&lt;a href="http://lar.loc/cases"&gt;Alice&lt;/a&gt;&lt;/td&gt;&lt;td&gt;Client&lt;/td&gt;&lt;/tr&gt;&lt;/tbody&gt;&lt;/table&gt;
&lt;/div&gt;
</code></pre>

<p>//CSS</p>

<pre><code>.active {
    background-color: #f9f9f9;
}
</code></pre>

<p>If you want to see this code in action and want to see what I'm talking about, check out this jsfiddle: <a href="http://jsfiddle.net/scottm28/VDCyd/1/" rel="nofollow">http://jsfiddle.net/scottm28/VDCyd/1/</a></p>

<p>Click on the text input and hit the down arrow key until you get all the way to the bottom. You'll notice that if you hit the down arrow key again there will be no highlighted table rows - this is what I'm trying to avoid. I would like for it to immediatly jump right back to the top VISIBLE table row.</p>
