PHP AJAX Live Search Example

🔎 PHP AJAX Live Search Example

A Live Search allows users to see search results in real-time as they type. Using AJAX and PHP, we can fetch matching data from MySQL without reloading the page.

1️⃣ Database Setup

Table: users

id	name	email
1	Vipul	vipul@example.com
2	Amit	amit@example.com
3	Ravi	ravi@example.com
4	Priya	priya@example.com

2️⃣ PHP Script to Fetch Search Results (`search.php`)

<?php
$conn = new mysqli("localhost", "root", "", "test_db");

if ($conn->connect_error) {
die("Connection failed: " . $conn->connect_error);
}

$search = $_GET['query']; // Get search input
$search = $conn->real_escape_string($search); // Prevent SQL injection

$sql = "SELECT * FROM users WHERE name LIKE '%$search%'";
$result = $conn->query($sql);

if ($result->num_rows > 0) {
echo "<ul>";
while ($row = $result->fetch_assoc()) {
echo "<li>" . $row['name'] . " (" . $row['email'] . ")</li>";
}
echo "</ul>";
} else {
echo "No results found";
}

$conn->close();
?>

<?php

$conn = new mysqli("localhost", "root", "", "test_db");

if ($conn->connect_error) {

die("Connection failed: " . $conn->connect_error);

}

$search = $_GET['query']; // Get search input

$search = $conn->real_escape_string($search); // Prevent SQL injection

$sql = "SELECT * FROM users WHERE name LIKE '%$search%'";

$result = $conn->query($sql);

if ($result->num_rows > 0) {

echo "<ul>";

while ($row = $result->fetch_assoc()) {

echo "<li>" . $row['name'] . " (" . $row['email'] . ")</li>";

}

echo "</ul>";

} else {

echo "No results found";

}

$conn->close();

3️⃣ HTML + JavaScript (`index.html`)

<!DOCTYPE html>
<html>
<head>
<title>PHP AJAX Live Search</title>
<script>
function liveSearch() {
var query = document.getElementById('search').value;
if (query.length == 0) {
document.getElementById('result').innerHTML = "";
return;
}

var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('result').innerHTML = this.responseText;
}
};
xhttp.open("GET", "search.php?query=" + query, true);
xhttp.send();
}
</script>
</head>
<body>
<h2>Live Search Using PHP & AJAX</h2>
<input type="text" id="search" onkeyup="liveSearch()" placeholder="Type name to search...">
<div id="result"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>PHP AJAX Live Search</title>

function liveSearch() {

var query = document.getElementById('search').value;

if (query.length == 0) {

document.getElementById('result').innerHTML = "";

return;

}

var xhttp = new XMLHttpRequest();

xhttp.onreadystatechange = function() {

if (this.readyState == 4 && this.status == 200) {

document.getElementById('result').innerHTML = this.responseText;

}

};

xhttp.open("GET", "search.php?query=" + query, true);

xhttp.send();

}

</script>

</head>

<body>

<h2>Live Search Using PHP & AJAX</h2>

</body>

</html>

4️⃣ How It Works

User types in the search input field.
onkeyup triggers the liveSearch() function.
AJAX sends the search query to search.php.
PHP queries MySQL database for matching records.
Results are returned and displayed in the div#result without reloading the page.

5️⃣ Key Points

Use LIKE '%query%' in SQL for partial matches.
Always sanitize user input to prevent SQL injection.
AJAX improves user experience by showing results in real-time.
Can be enhanced with JSON responses for more complex data.
Ideal for user directories, product search, or autocomplete fields.

PHP AJAX Live Search Example