Hi, in this article we are going to teach you How to Search data without page refresh in PHP MySQL using Ajax. in will be very easy for the users of your website. user’s don’t have to wait for web content like text, images and other files to search. when you click the search button or press enter key the result will be displayed on the same page and without page refresh. This is very simple and interesting. Lets Start the tutorial. you may also download How to Search with Auto Suggest in PHP MySQL using JQuery .
How to Search Data Without Page Refresh in PHP MySQL using Ajax
1-Creating Database
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “searching”.
- After Creating Database Open it.
- Click on SQL Tab on Top area
- Copy the Below Source Code and paste it.
- Then Click on Go.
-- phpMyAdmin SQL Dump -- version 4.2.7.1 -- http://www.phpmyadmin.net -- -- Host: 127.0.0.1 -- Generation Time: Mar 13, 2016 at 04:04 PM -- Server version: 5.6.20 -- PHP Version: 5.5.15 SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO"; SET time_zone = "+00:00"; /*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */; /*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */; /*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */; /*!40101 SET NAMES utf8 */; -- -- Database: `searching` -- -- -------------------------------------------------------- -- -- Table structure for table `users` -- CREATE TABLE IF NOT EXISTS `users` ( `user_id` int(11) NOT NULL, `fullname` varchar(255) NOT NULL ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=43 ; -- -- Dumping data for table `users` -- INSERT INTO `users` (`user_id`, `fullname`) VALUES (35, 'Deepak'), (36, 'Priyanshu'), (37, 'Priya'), (38, 'Lucky'), (39, 'Aryan'), (40, 'Bimlesh'), (41, 'Cat'), (42, 'Dog'); -- -- Indexes for dumped tables -- -- -- Indexes for table `users` -- ALTER TABLE `users` ADD PRIMARY KEY (`user_id`); -- -- AUTO_INCREMENT for dumped tables -- -- -- AUTO_INCREMENT for table `users` -- ALTER TABLE `users` MODIFY `user_id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=43; /*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */; /*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */; /*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;
OR Import DB File
After Downloading the source code extract it in your root folder.
- Open Phpmyadmin in your Browser
- Click on Database Tab Display on Top side
- Give the Database name “searching”.
- After Creating Database Open it.
- Click on Import Tab on Top area
- You can Find Db file in Downloaded source code Select it.
- Then Click on Go.
2- Creating Database Connection
After import Database File then next step is creating database connection using php copy the below code and save it is as “dbcon.php”.
<?php
$conn = mysql_connect('localhost', 'root', '') or die ('Error connecting to mysql');
mysql_select_db('searching') or die ('Unable to select database!');
?>
3 – Creating Search Form Using HTML
in this step we are going to creating a search form using HTML. Below the source code
<form action="" name = "form"> <input type="text" name="name" id="fn" Placeholder="Search Something..." style="width:300px; padding:8px;"/> <input type="submit" value="Search" id="search-btn" style="padding:8px;"/> </form>
4 – Load Data Without Refresh Using Ajax
in this step we are going to create Ajax script for getting data without page refresh.
<script type = "text/javascript">
$(document).ready(function(){
$('#s-results').load('search.php').show();
$('#search-btn').click(function(){
showValues();
});
$(function() {
$('form').bind('submit',function(){
showValues();
return false;
});
});
function showValues() {
$('#s-results').html('<img src="images/loader.gif" />');
$.post('search.php', { name: form.name.value },
function(result){
$('#s-results').html(result).show();
});
}
});
</script>
5 – Fetch Data From Database Using PHP
Next step is get data from MySQL Database using PHP. here you can find source code below.
<?php
include("dbcon.php");
isset( $_REQUEST['name'] ) ? $name=$_REQUEST['name'] : $name='';
$name = mysql_real_escape_string( $name );
if( empty( $name )){
echo '<script> alert("Please search something!")</script>';
}else{
$sql = "select * from users where fullname like '%$name%'";
$rs = mysql_query( $sql ) or die('Database Error: ' . mysql_error());
$num = mysql_num_rows( $rs );
if($num >= 1 ){
echo "<div style='margin:10px; color:green; font-weight: bold;'>$num records found!</div>";
echo "<table width='365' border ='0' cellspacing='5' cellpadding='5'>";
echo"<tr><th>RESULTS</th></tr>";
while($row = mysql_fetch_array( $rs )){
echo"<tr><td>";
echo"$row[fullname]<br></td>";
echo"</tr>";
}
echo"</table>";
}else{
echo "<script> alert('No Result!')</script>";
}
}
?>
If you facing any type of problem with this source code then you can Download the Complete source code in zip Formate by clicking the below button Download Now otherwise you can send Comment.