使用ajax通过键盘上的上/下键选择元素以自动完成

Question

我正在尝试使用Ajax，PHP和jQuery创建自动完成搜索框。

我可以使用鼠标在搜索框结果上进行选择，我想使用上下键选择元素。

您能告诉我如何使用键盘上的上/下键而不是鼠标来修改代码以选择元素吗？

<?php
if (isset($_POST['search'])) {
    $response = "<ul><li>No data found!</li></ul>";

    $connection = new mysqli('localhost', 'root', '', 'jqueryautocomplete');
    $q = $connection->real_escape_string($_POST['q']);

    $sql = $connection->query("SELECT name FROM names WHERE name LIKE '%$q%'");
    if ($sql->num_rows > 0) {
        $response = "<ul>";

        while ($data = $sql->fetch_array())
            $response .= "<li>" . $data['name'] . "</li>";

        $response .= "</ul>";
    }

    exit($response);
}
?>

Answer 1

您可以通过以下代码实现：

单击“确定”文本，然后尝试按向下键。

演示在这里： https : //output.jsbin.com/wopofom

 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <script type="text/javascript" src="//code.jquery.com/jquery-1.10.1.js"></script> <script type='text/javascript'> $(document).ready(function() { $("ul").keydown(function(e) { switch (e.keyCode) { case 40: $('li:not(:last-child).selected').removeClass('selected').next().addClass('selected'); break; case 38: $('li:not(:first-child).selected').removeClass('selected').prev().addClass('selected'); break; } }); }); </script> <style type="text/css"> .selected { color: red } </style> </head> <body> <div id="results" style="display: block;"> <h4>Press Key Up and Down</h4> <ul tabindex='1'> <li class='selected'>ok</li> <li>ok</li> <li>ok</li> <li>ok</li> <li>ok</li> </ul> </div> </body> </html>

使用ajax通过键盘上的上/下键选择元素以自动完成

问题描述

1 个解决方案

解决方案1
1 2017-07-29 21:54:06

使用ajax通过键盘上的上/下键选择元素以自动完成

问题描述

1 个解决方案

解决方案1 1 2017-07-29 21:54:06

解决方案1
1 2017-07-29 21:54:06