I'm trying to create a live search bar where I type names and I'm getting results from my database.
This is my project structure:
The files I'm using are map.js where I have my ajax call. My two php files one for mysql connection and one to retrieve the data from the database. And last my map.hbs where is my search bar.
map.js
function fill(Value) {
//Assigning value to "search" div in "map.hbs" file.
$('#search').val(Value);
//Hiding "display" div in "map.hbs file.
$('#display').hide();
}
$(document).ready(function() {
//On pressing a key on "Search box" in "map.hbs" file. This function will be called.
$("#search").keyup(function() {
//Assigning search box value to javascript variable named as "name".
var name = $('#search').val();
//Validating, if "name" is empty.
if (name == "") {
//Assigning empty value to "display" div in "map.hbs" file.
$("#display").html("");
}
//If the name is not empty.
else {
//AJAX is called.
$.ajax({
//AJAX type is "Post".
method: "POST",
//Data will be sent to "ajax.php".
url: "/php/loadData.php",
//Data, that will be sent to "ajax.php".
data: {
//Assigning value of "name" into "search" variable.
search: name
},
//If result found, this function will be called.
success: function(html) {
//Assigning result to "display" div in "map.hbs" file.
$("#display").html(html).show();
}
});
}
});
});
db.php
<?php
$con = MySQLi_connect(
"localhost", //Server host name.
"root", //Database username.
"", //Database password.
"covid_database" //Database name or anything you would like to call it.
);
//Check connection
if (MySQLi_connect_errno()) {
echo "Failed to connect to MySQL: " . MySQLi_connect_error();
}
?>
loadData.php
<?php
//Including Database configuration file.
include "db.php";
//Getting value of "search" variable from "script.js".
if (isset($_POST['search'])) {
//Search box value assigning to $Name variable.
$Name = $_POST['search'];
//Search query.
$Query = "SELECT name FROM pois WHERE name LIKE '%$Name%' LIMIT 5";
//Query execution
$ExecQuery = MySQLi_query($con, $Query);
//Creating unordered list to display the result.
echo '
<ul>
';
//Fetching result from the database.
// while ($Result = MySQLi_fetch_array($ExecQuery)) {
// ?>
// <!-- Creating unordered list items.
// Calling javascript function named as "fill" found in "map.js" file.
// By passing fetched result as a parameter. -->
// <li onclick='fill("<?php echo $Result['Name']; ?>")'>
// <a>
// <!-- Assigning searched result in "Search box" in "map.hbs" file. -->
// <?php echo $Result['Name']; ?>
// </li></a>
// <!-- Below php code is just for closing parenthesis. Don't be confused. -->
// <?php
// }}
// ?>
// </ul>
?>
map.hbs
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
{{!-- Search Bar --}}
<form class="form-inline my-2 my-lg-0">
<input class="form-control mr-sm-2" type="text" id="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success my-2 my-sm-0" type="submit" oninput="triggerSearch()">Search</button>
<div id="display">
</div>
</form>
<script src="/map.js"></script>
