Twitter like Search with jQuery, Ajax, PHP and MySQL Database

Today, I will teach on how to create Twitter like Search with jQuery, Ajax, PHP and MySQL Database.This method is similar to twitter when searching data in the MySQL database. I will use bootstrap template for the plugin of the design.

Let’s Begin:

• Create a MySQL database and name it “peopledb“.

• Do the following query for creating a table in the database.

CREATE TABLE IF NOT EXISTS `tblpeople` (
 `ID` int(11) NOT NULL AUTO_INCREMENT,
 `NAME` varchar(30) NOT NULL,
 `ADDRESS` varchar(60) NOT NULL,
 `SEX` varchar(11) NOT NULL,
 `CONTACT` varchar(15) NOT NULL,
 `IMAGE` varchar(30) NOT NULL,
 PRIMARY KEY (`ID`)
) ENGINE=InnoDB DEFAULT CHARSET=latin1

• Do the following query for inserting data in the table.

INSERT INTO `tblpeople` (`ID`, `NAME`, `ADDRESS`, `SEX`, `CONTACT`) VALUES
(2, 'Janno Palacios', 'Kabankalan City', 'Male', '09128255473'),
(3, 'Kenjie Earl Palacios', 'Kabankalan City', 'Male', '09128255477'),
(4, 'John Craig Palacios', 'Kabankalan City', 'Male', '09138255477'),
(5, 'Jeanniebe Nillos', 'Kabankalan City', 'Female', '09148255477'),
(6, 'Joken Villanueva', 'Himamaylan City', 'Male', '09288255477'),
(7, 'Roger Intong', 'Kabankalan City', 'Male', '09388255477'),
(8, 'Mark Palacios', 'Kabankalan City', 'Male', '09388255488');

• Create a css style for the layout of the design.

<!-- bootstrap plugins -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css"> 
<style type="text/css">
 
$server = 'localhost';
$dbuser = 'root';
$dbpass = '';
$dbname = 'peopledb';
$con = mysql_connect($server, $dbuser, $dbpass);
if (isset($con)) {
 # code...
 $dbSelect = mysql_select_db($dbname);
 if (!$dbSelect) {
 echo "Problem in selecting database! Please contact administraator";
 die(mysql_error());
 }
} else {
 echo "Problem in database connection! Please contact administraator";
 die(mysql_error());
}

 
 while ($row = mysql_fetch_array($result)) { 
 
 echo '<div id="output" class="form-group"> 
 ' .$row['NAME'].' ['.$row['ADDRESS'].'] <a href="" >
 Twitter like Autosuggestion with jQuery, Ajax and PHP </a>
 </div>'; 
 }
 
}else{
 echo '<div id="output" class="form-group"><h1>No result found!</h1></div>';
}
 ?> 
 <div style="border-bottom:dotted 1px #ddd; margin-bottom:15px;"></div>

• Finally, create a script for fetching data from the other page.

<!-- jQuery plugins -->
<script type = "text/javascript" src = "jquery/jquery.min.js" ></script> 
<script type="text/javascript">
 $(document).ready( function() { 
 
 $("#resultfor").html('Search result for ' + n)
 $("#output ").hide();
 $(".loader").html('<img src="img/loading-small.gif" /> Loading Results...'); 
 $("#output").fadeIn(900,0); 
 $.ajax({
 type: "GET",
 url: "loaddata.php ",
 dataType: "text", //expect html to be returned 
 data: {
 name:n
 },
 success: function(data) { 
 $("#body").html(data);
 }
 }); 
 })
 }) 
 </script>

For all students who need programmer for your thesis system or anyone who needs a sourcecode in any programming languages. You can contact me @ :

Email – [email protected]
Mobile No. – 09305235027 – tnt

Download Sourcecode