I want to add a search bar in my website, so I added jQUery UI autocomplete search and it works like a charm and the results are showing from the database. But, I need if the user clicks on a result from the list I want to redirect the user to that product page. This is the code in navigation.php:
<div id="search-div">
<form action="#" id="form-search" method="POST" class="form-inline">
<input id="language" type="text" placeholder="Search for a product" style="padding-left:15px;">
</form>
</div>
<script>
$("#language").autocomplete({
appendTo: $("#language").parent(),
source: function(data, cb){
$.ajax({
url: '/tutorial/admin/parsers/ajax.php',
method: 'GET',
dataType: 'json',
data: {
title: data.term
},
success: function(res){
cb(res);
}
});
}
});
</script>
And this is ajax.php code:
<?php
require_once $_SERVER['DOCUMENT_ROOT'].'/tutorial/core/init.php';
$data = array();
if (!empty($_GET['title'])) {
$title = strtolower(trim($_GET['title']));
$sql = "SELECT title FROM products WHERE title LIKE '" .$title. "%'";
$result = $db->query($sql);
while ($row = mysqli_fetch_assoc($result)) {
array_push($data, $row['title']);
}
}
echo json_encode($data);
exit;
?>
The page that I want the user to be redirected to is products.php?details=20 where 20 is the id of the product it is a GET method page. How to make the ability to redirect the product page based on the id if the user clicks on this product from the search list?