ajaxを使用してキーボードのアップ/ダウンキーでオートコンプリートを選択

Ajax、PHP、jQueryを使用してオートコンプリート検索ボックスを作成しようとしています。ajaxを使用してキーボードのアップ/ダウンキーでオートコンプリートを選択

マウスを使用して検索ボックスの結果を選択できます。キーを上下に使用して要素を選択します。

マウスの代わりにキーボードのアップ/ダウンキーを使用して要素を選択するコードを変更する方法を教えてください。 「OK」テキストに

クリックをし、ダウンキーを押してみてください：

<?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コードを表示することができますか？ –

あなたは、このようなコードによって実装することができます。

デモはここにある：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を使用してキーボードのアップ/ダウンキーでオートコンプリートを選択

答えて

関連する問題