ITSourceCode.com

We Exist to Provide 100% Free Source Code and Tutorials

Custom Search

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

twitterPIToday, 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">
 /*for the output* */
.container #output {
 display: inherit;
 height: 80px; 
 color: #000; 
 font-size: 19px;
 margin: 0;
 border-top: 1px dotted #ddd;
 color: #000; 
 background: transparent;

} 
/*for the result for*/
.container #resultfor{
 font-size: 18px;
 padding-bottom: 15px;
 padding-top: 15px; 
} 
/*for the button*/
.container .btn {
 background-color: #fff;
 border: 1px solid #000;
} 
/*for the gif loader*/
#body > .loader { 
 margin: 0; 
 height: 20px;
 display: inherit;
 font-size: 15px;
}
</style>
  • Do the following codes for the search box and button.
<div class="container">
<div class="page-header"><h2>Twitter like Search with jQuery, Ajax, PHP and MySQL Database.</h2></div>
<div class="box col-md-10"> 
 <div class="row">
 <div class=' form-inline col-sm-12'> 
 <div class="form-group"><input type="text" name="search" id="search_box" class='form-control input-lg'/></div>
 <div class="form-group"><button type="submit" class="btn btn-lg" >Search</button></div>
 </div>
 <div class='col-sm-12' id="resultfor"></div> 
 <div class='col-sm-12' id="body" ></div>
 </div> 
</div> 
</div>
  • Create a page for retrieving data from the MySQL database. Name it “loaddata.php“.
<div class="loader"></div>
<?php 
/*load the configuration */
$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());
}

 /*create a retrieve query*/
 $sqlQuery = "SELECT * FROM `tblpeople` Where NAME LIKE '%".$_GET['name']."%'";
 /*Execute the query*/
 $result = mysql_query($sqlQuery) or die(mysql_error());
 /*get the total rows*/ 
 $max = mysql_num_rows($result);
 /* validating the result */ 
 if ($max>0){ 
 /*retrieving data */
 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() { 
/* set the click event handler of a button */
 $('button').click(function(){ 
 /*get the given number in the textbox*/
 var n = document.getElementById("search_box").value; 
 /*set a variable for displaying the result*/ 
 $("#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 – jannopalacios@gmail.com
Mobile No. – 09305235027 – tnt

 

Download Sourcecode

Facebook Comments

Check Your Domain Ranking

1 Comment

Add a Comment
  1. Out now on Android, CSR Racing 2 brings art work that approach console high quality, a slew of modification prospects, and
    complete garages of faithfully reproduced certified autos.

Leave a Reply

Your email address will not be published. Required fields are marked *

ITSourceCode.com © 2016 Frontier Theme

Subscribe For Latest Updates

Signup for our newsletter and get notified when we publish new articles for free!