[URGENT]
I am using Anspress Plugin for a WordPress site.The ajax code for live search is working,but i want users to be able to navigate live search list using arrow keys.Here is the code.
I have tried e.keyCode,e.which,etc.but it is not working.Can anyone PLEASE explain how to do this?There are 2 php files(search-form.php and fetch.php)

Below is the search-form.php

<!-- Form for Ajax Live Search Box -->
<form id="ap-search-form" class="ap-search-form" action="<?php echo 
ap_get_link_to('search' ); ?>">

<button class="ap-btn ap-search-btn" type="submit"><?php _e('Search', 
'anspress-question-answer' ); ?></button> <!-- Button for Search -->

<div class="ap-search-inner no-overflow">       
<!--Input form for Ajax Live Search Box -->
<input name="ap_s" id="searchbox" type="text" class="ap-search-input ap-
form-input" placeholder="<?php _e('Search for Reviews...', 'anspress-
question-answer' ); ?>" value="<?php echo sanitize_text_field( 
get_query_var('ap_s' ) ); ?>" />

<div id="resultsearch"></div><!--For displaying the search results-->
</div>
</form>

<script src="jquery.js"></script>

<script>

$(document).ready(function () {
$("#searchbox").on('keyup',function () {
var key = $(this).val();
$.ajax({
url:'http://localhost/mysite/wp-content/plugins/anspress-question-
answer/theme/default/fetch.php',
type:'GET',
data:'keyword='+key,
beforeSend:function () {
//     $("#resultsearch").slideUp('fast');
                          },
success:function (data) {
$("#resultsearch").html(data);
$("#resultsearch").slideDown('fast','swing');
//if(key==38){alert("Hello");}
//$("#resultsearch:eq(x)")           
//alert(key);
                          }
        });
    });
   }); 
</script>

<style>
#resultsearch{
width:100%;
display: none;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
                }
#resultsearch #item {
box-sizing: border-box;
padding:10px;
font-size:18px;
width: 100%;
background: white;
border-bottom:1px solid #bdbdbd;
                      }
</style>

Below is the Fetch.php

<?php 
if($_GET['keyword'] && !empty($_GET['keyword']))
{
$conn=mysqli_connect("localhost","root","","sitedata");
$keyword = $_GET['keyword'];
$keyword="%$keyword%";
$query = "select distinct name from ratings where name like ?";
$statement = $conn->prepare($query);
$statement->bind_param('s',$keyword);
$statement->execute();
$statement->store_result();
if($statement->num_rows() == 0) // so if we have 0 records acc. to keyword 
                                // display no records found
{
echo '<div id="item">Ah snap...! No results found :/</div>';
$statement->close();
$conn->close();
}
else {
$statement->bind_result($name);
while ($statement->fetch()) //outputs the records
{   
$url="questions/question/"; 
$url1=$url.$name;
$url2=str_replace(" ","-",$url1);
echo "<div id='item'><a href='.$url2.'>$name</a></div>";
};
$statement->close();
$conn->close();
};
};
?>

Read more here: How to navigate search slidedown using arrow keys?


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: