Javascript 只关注第一个元素

我做了一个搜索表单，可以使用上下箭头键在结果之间导航。但仅适用于第一个结果，如果要再次导航，则需要再次关注搜索输入文本，如果不这样做，则无法再次按向上或向下导航

JSFiddle：

Js代码：

/* JS File */

// Start Ready
$(document).ready(function() {  

    // Icon Click Focus
    $('.buscar-icon').click(function(){
        $('input#search').focus();
    });

    // Live Search
    // On Search Submit and Get Results
    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').text(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }

    $("input#search").on("keyup", function(e) {
        // Set Timeout
        clearTimeout($.data(this, 'timer'));

        // Set Search String
        var search_string = $(this).val();

        // Do Search
        if (search_string == '') {
            $("ul#results").fadeOut();
            $('p#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('p#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });


});


$("input#search").on("keydown", function(e) {
        var $listItems = $('ul#results li');
        var $listItemsa = $('ul#results li a');

             var key = e.keyCode,
        $selected = $listItems.filter('.selected'),
        $current;

    if ( key != 40 && key != 38 ) return;

    $listItems.removeClass('selected');

    if ( key == 40 ) // Down key
    {
        if ( ! $selected.length || $selected.is(':last-child') ) {
            $current = $listItems.eq(0);
            event.preventDefault();
        }
        else {
            $current = $selected.next();
            event.preventDefault();
        }
    }
    else if ( key == 38 ) // Up key
    {
        if ( ! $selected.length || $selected.is(':first-child') ) {
            $current = $listItems.last();
            event.preventDefault();
        }
        else {
            $current = $selected.prev();
            event.preventDefault();
        }
    }
    $.fn.focusWithoutScrolling = function(){
var x = $(document).scrollLeft(), y = $(document).scrollTop();
  this.focus();
  window.scrollTo(x, y);
  return this; //chainability

};
var $currenta = $current.children();
$currenta.focusWithoutScrolling();
    $current.addClass('selected');
    event.preventDefault();
        });

---

这是因为您的事件侦听器仅检查输入字段上的键事件，您可以向侦听器添加结果列表，如下所示：

$("input#search, #results").on("keydown", function(e) {
.....
});

这应该允许导航结果

---

这是因为您的事件侦听器仅检查输入字段上的关键事件，因此您可以向侦听器添加结果列表，如下所示：

$("input#search, #results").on("keydown", function(e) {
.....
});

这应该允许导航结果