💻 Full Working Code
📁 index.html
<!DOCTYPE html>
<html lang="sw">
<head>
<meta charset="UTF-8">
<title>Live Search kwa AJAX - Faulink</title>
<style>
body { font-family: Arial; padding: 40px; text-align: center; background: #f8f9fa; }
input { padding: 10px; width: 300px; border-radius: 5px; border: 1px solid #ccc; }
#result { margin-top: 20px; background: #fff; padding: 15px; border-radius: 10px; display: inline-block; width: 320px; text-align: left; }
</style>
</head>
<body>
<h2>🔍 Live Search kwa AJAX</h2>
<input type="text" id="search" placeholder="Tafuta jina...">
<div id="result">Matokeo yataonekana hapa...</div>
<script>
document.getElementById("search").addEventListener("keyup", function(){
let query = this.value;
if(query.length === 0){
document.getElementById("result").innerHTML = "Matokeo yataonekana hapa...";
return;
}
let xhr = new XMLHttpRequest();
xhr.open("GET", "search.php?q=" + query, true);
xhr.onload = function(){
if(this.status == 200){
document.getElementById("result").innerHTML = this.responseText;
}
}
xhr.send();
});
</script>
</body>
</html>
📁 search.php
<?php
$data = ["Faustine", "Frank", "Flora", "Fatuma", "Filbert", "Fadhili"];
$q = strtolower($_GET['q'] ?? '');
$result = [];
foreach($data as $name){
if(strpos(strtolower($name), $q) !== false){
$result[] = $name;
}
}
if(empty($result)){
echo "❌ Hakuna matokeo.";
} else {
echo "✅ Matokeo:<br>" . implode("<br>", $result);
}
?>
________________________________________
🎥 YouTube Description
Hii ni Live Search Functionality inayotumia AJAX kutafuta data bila kurudia ukurasa mzima.
Utaona jinsi JavaScript inavyotuma request kwa PHP kila unapoandika neno kwenye input box.
💡 Ni mbinu bora kwa search bars, filtering, au realtime search systems.
📺 Tazama video kamili kwenye Faulink YouTube Channel.
________________________________________
🏷️ Hashtags
#LiveSearch #AJAX #PHP #JavaScript #Faulink #Coding #WebDevelopment #LearnCoding #WebDesign