How to navigate search slidedown using arrow keys?

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-->

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


$(document).ready(function () {
$("#searchbox").on('keyup',function () {
var key = $(this).val();
beforeSend:function () {
//     $("#resultsearch").slideUp('fast');
success:function (data) {

display: none;
border-bottom:1px solid black;
border-left:1px solid black;
border-right:1px solid black;
#resultsearch #item {
box-sizing: border-box;
width: 100%;
background: white;
border-bottom:1px solid #bdbdbd;

Below is the Fetch.php

if($_GET['keyword'] && !empty($_GET['keyword']))
$keyword = $_GET['keyword'];
$query = "select distinct name from ratings where name like ?";
$statement = $conn->prepare($query);
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>';
else {
while ($statement->fetch()) //outputs the records
$url2=str_replace(" ","-",$url1);
echo "<div id='item'><a href='.$url2.'>$name</a></div>";

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

Leave a Reply

Your email address will not be published. Required fields are marked *