箭头键导航不适用于li元素

Question

我在搜索表单上使用Google推荐查询。我想要完成的是让用户使用javascript / jquery，

与键盘交互结果列表

我希望用户

• 使用箭头键向上/向下浏览建议列表（不工作）
• 使用ESC（当前正在工作）取消列表

的jsfiddle：

https://jsfiddle.net/y8r41qd7/1/

＆＃13;

＆＃13;

if ($("#suggest-results").length) {

    var li = $('li');
    var liSelected;
    $(window).keydown(function(e) {
        if (e.which === 40) {
            console.log("Succeed on down arrow");
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.next();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else if (e.which === 38) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.last().addClass('selected');
                }
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else if (e.which === 27) {
            $("#syrInputForm").val('');
            $("#suggest-results").html(' ');
            return false;
        }
    });
    $(".header input[name=tag]").keyup(function() {

        var searched = $(this).val();
        var gghref = 'https://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=' + searched;
        var result;
        $.ajax({
            url: gghref,
            type: "POST",
            dataType: 'jsonp',
            success: function(data) {
                for (var i = 1; i < data[1].length; i++) {
                    if (data[1][i][0].length && data[1][i]) {
                        result += '<li class="gsuggested"><a href="#">' + data[1][i][0] + '</a></li>';
                    }
                }
                $("#suggest-results").html("<ul>" + result.replace("undefined", "") + "</ul>");
                $('.gsuggested > a').click(function() {
                    var valoare = $(this).text();
                    $(".header input[name=tag]").val(valoare).focus();
                    $("#suggest-results").html('&nbsp;');
                    return false;
                });
            }
        });
    });
}

＆＃13;

#suggest-results .selected {
  background: #CCD5DB;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="header">
    <div class="searchWidget">
        <form action="" method="get" id="searchform" autocomplete="off" novalidate="true">
            <div class="search-holder">
                <span class="search-button">
        <button type="submit">
           <i class="fa fa-search"></i>
        </button>
     </span>
                <div class="form-control-wrap">
                    <input id="syrInputForm" type="text" class="form-control input-lg empty" name="tag" value="" placeholder="Search">
                </div>
            </div>
        </form>
        <div id="suggest-results"></div>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

我有什么问题吗？

Answer 1

见下文。您必须在窗口函数中指定li并在输入框键盘输入功能上添加一个检查，以确保它不是按下的上/下/ esc键。

if ($("#suggest-results").length) {

    var li = $('li');
    var liSelected;
    $(window).keydown(function(e) {
        li = $('li');
        if (e.which === 40) {
            console.log("Succeed on down arrow");
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.next();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.eq(0).addClass('selected');
                }
            } else {
                liSelected = li.eq(0).addClass('selected');
            }
        } else if (e.which === 38) {
            if (liSelected) {
                liSelected.removeClass('selected');
                next = liSelected.prev();
                if (next.length > 0) {
                    liSelected = next.addClass('selected');
                } else {
                    liSelected = li.last().addClass('selected');
                }
            } else {
                liSelected = li.last().addClass('selected');
            }
        } else if (e.which === 27) {
            $("#syrInputForm").val('');
            $("#suggest-results").html(' ');
            return false;
        }
    });
    $(".header input[name=tag]").keyup(function(e) {
        if (e.which !== 27 && e.which !== 38 && e.which !== 40) {
            var searched = $(this).val();
            var gghref = 'https://suggestqueries.google.com/complete/search?hl=en&ds=yt&client=youtube&hjson=t&cp=1&q=' + searched;
            var result;
            $.ajax({
                url: gghref,
                type: "POST",
                dataType: 'jsonp',
                success: function(data) {
                    for (var i = 1; i < data[1].length; i++) {
                        if (data[1][i][0].length && data[1][i]) {
                            result += '<li class="gsuggested"><a href="#">' + data[1][i][0] + '</a></li>';
                        }
                    }
                    $("#suggest-results").html("<ul>" + result.replace("undefined", "") + "</ul>");
                    $('.gsuggested > a').click(function() {
                        var valoare = $(this).text();
                        $(".header input[name=tag]").val(valoare).focus();
                        $("#suggest-results").html('&nbsp;');
                        return false;
                    });
                }
            });
        }
    });
}

#suggest-results .selected {background: #CCD5DB;} 
#suggest-results li.selected {background: #CCD5DB;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="header">
<div class="searchWidget">
<form action="" method="get" id="searchform" autocomplete="off" novalidate="true">
   <div class="search-holder">
      <span class="search-button">
        <button type="submit">
           <i class="fa fa-search"></i>
        </button>
     </span>
   <div class="form-control-wrap">
      <input id="syrInputForm" type="text" class="form-control input-lg empty" name="tag" value="" placeholder="Search">                
   </div>
</div>
</form>
<div id="suggest-results"></div>
</div>
</div>