search function in ecommerce in laravel 5 - php

Question

I am creating the search functionality in my laravel 5 ecommerce web application.
I want the user to move the cursor with the arrow keys on the search results, but I am failing to achieve this.
Here's the controller:
public function searchProduct(Request $request)
{
$productName = $request->input('name');
if($productName !== '')
{
$products = Product::where('name', 'LIKE', '%' . $productName . '%')->where('display', 'Enabled')->get();
return view('partials.search', compact('products'));
}
return false;
}
The search results:
#foreach($products as $product)
<li>
<a href="{{ url('/store/'.$product->code .'/'.Safeurl::make($product->name)) }}" class="link_scheme_color_main">
{{ $product->name }}
</a>
</li>
#endforeach
And the AJAX:
$('.searchProduct').keydown(function(e) {
var name = $(this).val();
var inputData = $('.formSearchProduct').serialize();
var prodList = $('.showProds');
var countList = prodList.find('ul li').length;
var prd = prodList.find('ul li');
if(name.length === 0) {
prodList.hide();
} else {
$.ajax({
url: '{{ url('/store/product/search') }}',
type: "POST",
data: inputData
})
.done(function(m) {
if (m) {
prodList.show();
prodList.find('ul.searchedProducts').html(m);
prodList.find('ul li').first().addClass('activeProduct');
} else {
prodList.hide();
}
});
}
});
The css:
.activeProduct {background: #ccc !important;}
I have made this application live. You can check it here. The application is still in the development stage and not in production.
What I want to achieve is:
When the user searches for the product, he/she can use the up and down arrow keys to navigate the search results, and on click of any of the results, he/she should go to the product page.
When the user searches and removes the search keyword(s), all the products are shown, I don't want that.
UPDATE 1:
I have added this code and it seems there is a bug, where I don't know. The bug is that I can only move to the second list item when pressing the down arrow key and at the very next second, it moves back to the first list item.
$('.searchProduct').keydown(function(e) {
var prodList = $('.showProds');
var countList = prodList.find('ul li').length;
var prd = prodList.find('ul li');
var active = prodList.find('ul li.activeProduct');
console.log(e.keyCode);
if (e.which === 40) {
var next = active.removeClass('activeProduct').next('li');
next = next.length > 0 ? next : $('li:eq(0)');
next.addClass('activeProduct');
}
});
UPDATE 2:
I have got it working to a certain extent. I have removed the code of update 1 and added the below code to done() method.
if (m) {
prodList.show();
prodList.find('ul.searchedProducts').html(m);
prodList.find('ul li').first().addClass('activeProduct');
if(e.keyCode == 40) {
prodList.find('ul li').prev().removeClass('activeProduct');
prodList.find('ul li').next().first().addClass('activeProduct').focus();
}
} else {
prodList.hide();
}
But this moves only to the second list item on every time the down arrow key is pressed. You can have a look at the link that I provided above.
Kindly help me out with this. Thanks.