0

当用户在文本输入字段内单击并按下向下或向上箭头键时，我会触发一些 javascript。此功能的目的是搜索表值，然后能够按向下和向上箭头键选择一个。我让它工作得很好，但我唯一遇到的问题是，当用户到达最后一个可见的表格行并再次按下时，突出显示的表格行消失了。我想要发生的是当用户到达最后一个表格行并再次按下时，我希望突出显示第一个可见表格行，以便用户可以再次开始键入可见表格行。这是相关的代码：

//javascript

$(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 > 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();
        }

    });

}

//HTML

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

//CSS

.active {
    background-color: #f9f9f9;
}

如果您想查看此代码的运行情况并想了解我在说什么，请查看此 jsfiddle：http: //jsfiddle.net/scottm28/VDCyd/1/

单击文本输入并按向下箭头键，直到一直到底部。您会注意到，如果您再次按下向下箭头键，将不会有突出显示的表格行 - 这是我试图避免的。我希望它立即跳回顶部可见表行。

4

1 回答 1

2

将您的相关代码更改为

if (e.keyCode === 40) { //down
    e.preventDefault();    

    var next = $cur.nextAll(':visible:first');
    if (next.length === 0){
        next = $('tr:visible:first', $tbl);
    }
    next.addClass('active');

} else if (e.keyCode == 38) { //up
    e.preventDefault();    

    var next = $cur.prevAll(':visible:first');
    if (next.length === 0){
        next = $('tr:visible:last', $tbl);
    }
    next.addClass('active');

}

演示在http://jsfiddle.net/VDCyd/3/

于 2013-02-20T23:38:59.340 回答