使用 ajax 通过键盘中的向上/向下键选择元素以进行自动完成答案

【问题标题】：using ajax to select an element through up/down key in keyboard for autocomplete使用 ajax 通过键盘中的向上/向下键选择元素以进行自动完成
【发布时间】：2017-07-29 21:44:07
【问题描述】：

我正在尝试使用 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);
}
?>

【问题讨论】：

你能显示你用于自动完成的javascript代码吗？

标签： php jquery html css ajax

【解决方案1】：

你可以通过这样的代码来实现：

点击“ok”文字并尝试按上下键。

演示在这里：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>

【讨论】：