PHP tutorial - ajax search


AJAX search

In this tutorial, you will learn to create a simple search engine to find data from a table of MYSQL Server database. This search engine allows visitor to enter their queries in a searching text box. While the visitor is typing text in the text box, records of books that match the query will be displayed immediately below the text box. The visitor also can push the search button to find the data that match the text input in the text box. The visitor is able to search the data by book title or by book author. The page is not reloaded when the results are retrieved from the database and displayed on the page.

ajax search

To follow this tutorial, now you need to create a table called tblbook in a database called test in MYSQL Server database. Then add some example data to the table as shown below. You also need to create a user account to manage this database. In MYSQL Server, I created a new account that has the following information: user=test and password=test. This account is used to connect to database from PHP code.

tblbook

 

Below is a PHP file that is used to handle connection and read data from the tblbook table of MYSQL Server database. This php file is called datamanip.php. Its content is shown below.

datamanip.php

<?php
class DataHandler{
private $con;
private $db;

public function DataHandler($DB_HOST,$DB_USER,$DB_PASS,$DB_NAME){

$this->con=mysql_connect($DB_HOST,$DB_USER,$DB_PASS);
if (!$this->con) {
echo "Unable to connect to DB: " . mysql_error();
exit;
}
$this->db=mysql_select_db($DB_NAME,$this->con);
if (!$this->db) {
echo "Unable to select mydbname: " . mysql_error();
exit;
}

}

public function getBooks($q){

$query="SELECT * FROM tblbook WHERE title LIKE '%$q%' or author LIKE '%$q%'";
$result=mysql_query($query);
$numrows=mysql_num_rows($result);
$str="";
if($numrows>0) {

$str="<table style='width:50%; border-spacing: 0 2px;' cellspacing='0'>";
$str.="<tr style='background-color: #f8f8f8'><th>ID</th><th>Title</th><th>Author</th>";
while($datarow=mysql_fetch_row($result)){
$str.="<tr>";
$str.="<td style='text-align: center'>$datarow[0]</td>";
$str.="<td style='text-align: center'>$datarow[1]</td>";
$str.="<td style='text-align: center'>$datarow[2]</td>";

$str.="</tr>";
}


$str.="</table>";
}
else
$str.="<p><strong>No result</strong></p>";
return $str;

}

public function closeConnection(){
  mysql_close($this->con);
 }

}

?>

Here is the livesearch.php file. On this page, the visitor will enter his/her query and see the results that match the query.

livesearch.php

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Search books</title>
<style>
#button{
background:#09C;
height:30px;
width:100px;
text-align:center;
padding-top:2px;
border-style:none;
color:#ffffff;
font:bold;
border-radius: 23px;

}
table{
border-style:none;

}
#txtsearch{
height: 30px;

}
</style>

<script>
function getBooks(q){
alert(q);
var res=document.getElementById("results");
if(q.length==0){
return;
}
var xmlhttp=new XMLHttpRequest();
xmlhttp.onreadystatechange=function(){
if(xmlhttp.readyState==4 && xmlhttp.status==200){
res.innerHTML=xmlhttp.responseText;

}
}

xmlhttp.open("GET","getbooks.php?txtsearch="+q,true);
xmlhttp.send();
}
</script>
</head>

<body>
<center>
<form id="form1">
<table width="442" border="0" cellspacing="2" cellpadding="2">
<tr>
<td width="366"><label for="txtsearchbox"></label>
<input name="txtsearch" type="text" id="txtsearch" size="60" onkeyup="getBooks(this.value)"/></td>
<td width="56"><input type="submit" name="button" id="button" value="Search" /></td>
</tr>
</table>
<p>&nbsp;</p>
<div id="results">
<?php
//search button is pushed
if($_REQUEST['button']){
include("getbooks.php");
}
?>
</div>
</form>
</center>
</body>
</html>

The getbooks.php file below will be executed when the AJAX code written above sends a request with the search query to the server.

getbooks.php

<?php

$q=$_REQUEST['txtsearch'];
include("datamanip.php");
$dbhandler=new DataHandler("localhost","test","test","test");
echo $dbhandler->getBooks($q);
$dbhandler->closeConnection();


?>

You can download the datamanip.php, livesearch.php, and getbooks.php files from here.



Comments

wdewff@fdan.com comment

 wdewff@fdan.com

dfd


2017-05-11




This website intents to provide free and high quality tutorials, examples, exercises and solutions, questions and answers of programming and scripting languages:
C, C++, C#, Java, VB.NET, Python, VBA,PHP & Mysql, SQL, JSP, ASP.NET,HTML, CSS, JQuery, JavaScript and other applications such as MS Excel, MS Access, and MS Word. However, we don't guarantee all things of the web are accurate. If you find any error, please report it then we will take actions to correct it as soon as possible.