PHP MySQLi Ajax Live Search - PHP & Mysqli Code

PHP MySQLi Ajax Live Search – PHP & Mysqli Code
First, Create mysql Username, Password and Database from PHPnysql Admin Import the code to your database CREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL ); Secondly, Create a filename index.php and save the code insert this file, then upload it to your public_html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHP Live MySQL Database Search</title> <style> body{ font-family: Arail, sans-serif; } /* Formatting search box / .search-box{ width: 300px; position: relative; display: inline-block; font-size: 14px; } .search-box input[type="text"]{ height: 32px; padding: 5px 10px; border: 1px solid #CCCCCC; font-size: 14px; } .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: 1px solid #CCCCCC; border-top: none; cursor: pointer; } .result p:hover{ background: #f2f2f2; } </style> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script> $(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("backend-search.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(); }); }); </script> </head> <body> <div class="search-box"> <input type="text" autocomplete="off" placeholder="Search country..." /> <div class="result"></div> </div> </body> </html> Finally, Create another filename backend-search.php then, Insert the following code and save it. Upload the file to public_html Modify: localhost”, “root”, “”, “demo” according to your mysql username, password, database name from line-4 <?php / Attempt MySQL server connection. Assuming you are running MySQL server with default setting (user 'root' with no password) / $link = mysqli_connect("localhost", "root", "", "demo"); // Check connection if($link === false){ die("ERROR: Could not connect. " . mysqli_connect_error()); } if(isset($_REQUEST["term"])){ // Prepare a select statement $sql = "SELECT FROM countries WHERE name LIKE ?"; if($stmt = mysqli_prepare($link, $sql)){ // Bind variables to the prepared statement as parameters mysqli_stmt_bind_param($stmt, "s", $param_term); // Set parameters $param_term = $_REQUEST["term"] . '%'; // Attempt to execute the prepared statement if(mysqli_stmt_execute($stmt)){ $result = mysqli_stmt_get_result($stmt); // Check number of rows in the result set if(mysqli_num_rows($result) > 0){ // Fetch result rows as an associative array while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){ echo "<p>" . $row["name"] . "</p>"; } } else{ echo "<p>No matches found</p>"; } } else{ echo "ERROR: Could not able to execute $sql. " . mysqli_error($link); } } // Close statement mysqli_stmt_close($stmt); } // close connection mysqli_close($link); ?>

PHP MySQLi Ajax Live Search – PHP & Mysqli Code

First, Create mysql Username, Password and Database from PHPnysql Admin

Import the code to your database

CREATE TABLE countries ( id INT NOT NULL PRIMARY KEY AUTO_INCREMENT, name VARCHAR(50) NOT NULL );

Secondly, Create a filename index.php and save the code insert this file, then upload it to your public_html

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>PHP Live MySQL Database Search</title>
<style>
body{
font-family: Arail, sans-serif;
}
/* Formatting search box */
.search-box{
width: 300px;
position: relative;
display: inline-block;
font-size: 14px;
}
.search-box input[type="text"]{
height: 32px;
padding: 5px 10px;
border: 1px solid #CCCCCC;
font-size: 14px;
}
.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: 1px solid #CCCCCC;
border-top: none;
cursor: pointer;
}
.result p:hover{
background: #f2f2f2;
}
</style>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script>
$(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("backend-search.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();
});
});
</script>
</head>
<body>
<div class="search-box">
<input type="text" autocomplete="off" placeholder="Search country..." />
<div class="result"></div>
</div>
</body>
</html>

Finally, Create another filename backend-search.php then, Insert the following code and save it. Upload the file to public_html

Modify: localhost”, “root”, “”, “demo” according to your mysql username, password, database name from line-4

<?php
/* Attempt MySQL server connection. Assuming you are running MySQL
server with default setting (user 'root' with no password) */
$link = mysqli_connect("localhost", "root", "", "demo");
// Check connection
if($link === false){
die("ERROR: Could not connect. " . mysqli_connect_error());
}
if(isset($_REQUEST["term"])){
// Prepare a select statement
$sql = "SELECT * FROM countries WHERE name LIKE ?";
if($stmt = mysqli_prepare($link, $sql)){
// Bind variables to the prepared statement as parameters
mysqli_stmt_bind_param($stmt, "s", $param_term);
// Set parameters
$param_term = $_REQUEST["term"] . '%';
// Attempt to execute the prepared statement
if(mysqli_stmt_execute($stmt)){
$result = mysqli_stmt_get_result($stmt);
// Check number of rows in the result set
if(mysqli_num_rows($result) > 0){
// Fetch result rows as an associative array
while($row = mysqli_fetch_array($result, MYSQLI_ASSOC)){
echo "<p>" . $row["name"] . "</p>";
}
} else{
echo "<p>No matches found</p>";
}
} else{
echo "ERROR: Could not able to execute $sql. " . mysqli_error($link);
}
}
// Close statement
mysqli_stmt_close($stmt);
}
// close connection
mysqli_close($link);
?>

Published:	December 20, 2022
Author:	admin
Category:	PHP Source Code
Views:	21

This article was posted in PHP Source Code. Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply Cancel reply