Creating a dynamic search box is quite simple.A big thanks to AJAX,which allows us to send HTTP requests without reloading the whole page.
This is a very simple system you should have a basic knowledge of AJAX,PHP & MYSQL and offcource HTML.
Getting started
I have included 3 files in this system but it totally depends on you.You can finish of in 2
1) HTML search page named index.php.
2) Database connection file named as database_con.php
3) PHP file to fetch information from the database.
PHP file named as search.php
Database named as data.
Table named as search.
Let's get started....
index.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
#suggestion_box{
display: none;
}
</style>
<script>
//From here begins the magic of AJAX
function check(){
var search_box_id = document.getElementById('search_box');
var search_value = search_box_id.value;
var box_id = document.getElementById('suggestion_box')
var ajax = new XMLHttpRequest();ajax.open("POST","search.php",true);
ajax.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
ajax.onreadystatechange = function(){
if(ajax.readyState == 4 && ajax.status == 200){
if(ajax.responseText!=''){
box_id.style.display = "block";
box_id.innerHTML = ajax.responseText;
}
}
}
ajax.send("query="+search_value);
}
</script>
</head>
<body>
<input id="search_box" onkeyup="check()" type="text" style="margin-left: 500px;padding-left: 5px; margin-top: 250px; width: 250px; height: 30px;"> </input>
<div id="suggestion_box" style="margin-left: 500px;border-color:background; border-style:solid;
border-width:1px;margin-top:0px; width: 257px; background-color: blanchedalmond; border-radius:3px; "></div>
</body>
</html>
search.php
<?php
if(isset($_POST['query']) && $_POST['query']!=''){
$search_value = preg_replace('#[^a-z.]#i', '', $_POST['query']);
include_once 'database_con.php';
$sql = "Select * from search where contents like '%$search_value%'";
$result = mysqli_query($db_connx, $sql);
if(mysqli_num_rows($result)>0){
while ($row = mysqli_fetch_array($result,MYSQLI_ASSOC))
{
$id = $row['id'];
$search_string = $row['contents'];
echo "<div style='height:35px;padding-left:15px;' >
<a href='index.php?search=$search_string' style='text-decoration:none;
padding-right:190px;
text-allign:centre; padding-bottom:3px; padding-top:3px
;cursor:pointer; '>
$search_string </a>
<hr> </div>";
}
}
}
?>
database_con.php
<?php
$db_connx = mysqli_connect("localhost", "root", "root", "data");
if(mysqli_connect_errno()){
echo mysqli_connect_error();
exit();
}
?>
I have kept everything simple.Only a simple styling.But you can extend it to whatever and however you want.
Happy Coding :)
No comments:
Post a Comment