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 个答案: