如何为自动建议添加键盘事件

Question

我的方向键事件存在问题。在添加Up事件之前，down和Enter Key箭头正常工作，但现在Enter Key正在运行但{{1}只移动了一步而Down key无效。

UP key

上下按键的上一个工作代码如下

    function autosuggestion_search() {
    $('#mySearch').on('keyup', function (e) {
        switch (e.which) {
            case 40:
                $('#searchAuto ul li:not(:last-child).selected').removeClass('selected').next().addClass('selected');
                $('#searchAuto ul .selected a')[0].focus();
                break;
            case 38:
                $('#searchAuto ul li:not(:first-child).selected').removeClass('selected').prev().addClass('selected');
                $('#searchAuto ul .selected a')[0].focus();
                break;
            case 13:
                break;
            default:

                var search_string = $("#mySearch").val();
                if (search_string == '') {
                    $("#searchAuto ul").html('');

                } else {
                    $.post(ajaxurl, {
                        'dataType': 'json',
                        'action': 'mysearch',
                        'search': search_string,

                    }, function (response) {
                        if (response) {
                            $("#searchAuto ul").html(response);
                            $('#searchAuto ul li:first-child').addClass('selected');
                        }
                    });
                }

        }

    });
}

搜索表格html如下

function autosuggestion_search() {
$('#mySearch').on('keyup', function (e) {
    //console.log("asdasdad");
    switch (e.which) {
        case 40:
            console.log("down----");
            $('#searchAuto ul li:not(:last-child).selected').removeClass('selected').next().addClass('selected');

            break;
        case 38:
               console.log("up----");


            $('#searchAuto ul li:not(:first-child).selected').removeClass('selected')  .prev().addClass('selected');

            break;
        default:

            var search_string = $("#mySearch").val();
            if (search_string == '') {
                $("#searchAuto ul").html('');

            } else {
                $.post(ajaxurl, {
                    'dataType': 'json',
                    'action': 'mysearch',
                    'search': search_string,

                }, function (response) {
                    if (response) {
                        $("#searchAuto ul").html(response);
                           $('#searchAuto ul li:first-child').addClass('selected');
                    }
                });
            }

    }
});}

Answer 1

  function autosuggestion_search() {
   //ajaxurl = ''; //ajaxurl defination
    $('#mySearch').on('keyup', function (e) {

        switch (e.which) {
            case 40:
               $('#searchAuto ul li:not(:last-child).selected').removeClass('selected').next().addClass('selected');
               $('a.selected').focus();
                break;
            case 38:
                $('#searchAuto ul li:not(:first-child).selected').removeClass('selected').prev().addClass('selected');
                 $('a.selected').focus();
                break;
            case 13:
                break;
            default:

                var search_string = $("#mySearch").val();
                if (search_string == '') {
                    $("#searchAuto ul").html('');

                } else {
                    $.post(ajaxurl, {
                        'dataType': 'json',
                        'action': 'mysearch',
                        'search': search_string,

                    }, function (response) {
                        if (response) {
                            $("#searchAuto ul").html(response);
                            $('#searchAuto ul li:first-child').addClass('selected');
                        }
                    });
                }

        }

    });
}

//$(document).ready(autosuggestion_search); //call function

// Some of your HTML code change like `li` contains <a> tag etc.
    <label><span class="screen-reader-text">Search for:</span>
        <input type="search" id="mySearch" class="search-field" placeholder="Search" value="" name="s" autocomplete="off">
    </label>
    <input type="submit" class="search-submit" value="sddc" />
    <div class="searchAuto" id="searchAuto">
    <ul>
      <li  class="selected"><a>list1</a></li>
      <li><a>list2</a></li>
      <li><a>list3</a></li>
    </ul>
    </div>