HTML Search suggestion with Ajax doesn't auto complete with keyboard - php

Question

I am developing a web application in PHP with a MySql database, and made a search suggestion box with ajax.
The problem is that I can select the suggestions with my mouse and it auto completes but when I try to auto complete it with my keyboard (select it with arrow up arrow down and pressing enter) it does nothing.
Is this a problem of my css, ajax or just html??? Could you please help with this, All help is appreciated, Thanks.
Here is my code :
Ajax
$term = mysqli_real_escape_string($link, $_REQUEST['term']); if(isset($term)){
// Attempt select query execution
$sql = "SELECT * FROM something WHERE name LIKE '" . $term . "%' LIMIT 4";
if($result = mysqli_query($link, $sql)){
if(mysqli_num_rows($result) > 0){
while($row = mysqli_fetch_array($result)){
echo "<p>" . $row['name'] . "</p>";
}
// Close result set
mysqli_free_result($result);
} else{
echo "<p>No Results</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
} }
CSS
.result{ position: absolute;
z-index: 999;
top: 100%;
left: 0;
}
.search-box input[type="text"], .result{
width: 100%;
box-sizing: border-box;
}
/* Formatting result items */
.result p{
margin: 0;
padding: 7px 10px;
border: 0px solid #CCCCCC;
border-top: none;
cursor: pointer;
background: #ffffff;
}
.result p:hover{
background: #f2f2f2;
}
JAVASCRIPT
$(document).ready(function(){
$('.search-box input[type="text"]').on("keyup input", function(){
/* Get input value on change */
var inputVal = $(this).val();
var resultDropdown = $(this).siblings(".result");
if(inputVal.length){
$.get("something.php", {term: inputVal}).done(function(data){
// Display the returned data in browser
resultDropdown.html(data);
});
} else{
resultDropdown.empty();
}
});
// Set search input value on click of result item
$(document).on("click", ".result p", function(){
$(this).parents(".search-box").find('input[type="text"]').val($(this).text());
$(this).parent(".result").empty();
}); });
HTML
<form align=center method='POST' action='index.php?cmd=list-something'>
<h1 class="text-center">Search</h1>
<div class="form-group">
<div class="input-group search-box">
<input class="form-control" type="text" autocomplete="off" name="search" id="search" placeholder="Search"/>
<div class="result"></div>
<span class="input-group-btn">
<button class="btn btn-success" type="submit"><span class="glyphicon glyphicon-search" aria-hidden="true"><span style="margin-left:10px;">Pesquisar</span></button>
</span>
</span>
</div>
</div>
</form>

Answer 1

Please refer this Autocomplete library docs.
You can implement normal AJAX for fetching records and render those records using Autocomplete library.