使用ajax通過鍵盤上的上/下鍵選擇一個元素來自動完成

我想使用Ajax，PHP和jQuery做一個自動完成搜索框。使用ajax通過鍵盤上的上/下鍵選擇一個元素來自動完成

我可以使用鼠標在搜索框的結果上做出選擇，我想使用上下鍵來選擇元素。

你能告訴我如何修改代碼來使用鍵盤上的上/下鍵而不是鼠標來選擇元素嗎？

<?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); 
} 
?>

來源

2017-07-29 Swaty

你能告訴你正在使用的自動完成功能的JavaScript代碼？ –

你可以像這樣的代碼落實：

點擊「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>

來源

2017-07-29 21:54:06

使用ajax通過鍵盤上的上/下鍵選擇一個元素來自動完成

回答

相關問題