Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





How to search data in php using ajax?

search data in php using ajax

Database Table:-

CREATE TABLE `freeze`.`user` (
`id` INT( 3 ) NOT NULL AUTO_INCREMENT ,
`username` VARCHAR( 30 ) NOT NULL ,
`password` VARCHAR( 50 ) NOT NULL ,
`email` VARCHAR( 50 ) NOT NULL ,
PRIMARY KEY ( `id` )
) ENGINE = INNODB;

When submit button is clicked, ajax function will be called with method as POST, url as ajax.php and sucess message.

Example

File Name : index.php

<?php
$query = mysql_connect ( "localhost", "root", "" );
mysql_select_db ( "ajax", $query );
?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Freeze Search engine</title>
<link rel="stylesheet" href="style.css" type="text/css">
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>


<script type="text/javascript">
function fill(Value)
{
$('#name').val(Value);
$('#display').hide();
}

$(document).ready(function(){
$("#name").keyup(function() {
var name = $('#name').val();
if(name=="")
{
$("#display").html("");
}
else
{
$.ajax({
type: "POST",
url: "ajax.php",
data: "name="+ name ,
success: function(html){
$("#display").html(html).show();
}
});
}
});
});
</script>



</head>
<body>
<div id="content">
<?php

$val = '';
if (isset ( $_POST ['submit'] )) {
if (! empty ( $_POST ['name'] )) {
$val = $_POST ['name'];
} else {
$val = '';
}
}
?>
<center>
<img src="freeze.PNG">
</center>
<form method="post" action="index.php">
Search : <input type="text" name="name" id="name" autocomplete="off"
value="<?php echo $val;?>"> <input type="submit" name="submit"
id="submit" value="Search">
</form>
<div id="display"></div>
<?php

if (isset ( $_POST ['submit'] )) {
if (! empty ( $_POST ['name'] )) {
$name = $_POST ['name'];
$query3 = mysql_query ( "SELECT * FROM users WHERE name LIKE '%$name%' OR email LIKE '%$name%'" );
while ( $query4 = mysql_fetch_array ( $query3 ) ) {
echo "<div id='box'>";
echo "<b>" . $query4 ['name'] . "</b>";
echo "<div id='clear'></div>";
echo $query4 ['email'];
echo "</div>";
}
} else {
echo "No Results";
}
}
?>
</div>
</body>
</html>

File Name : ajax.php

<?php
$query=mysql_connect("localhost","root","");
mysql_select_db("ajax",$query);
if(isset($_POST['name']))
{
$name=trim($_POST['name']);
$query2=mysql_query("SELECT * FROM users WHERE name LIKE '%$name%' OR email LIKE '%$name%'");
echo "<ul>";
while($query3=mysql_fetch_array($query2))
{
?>

<li onclick='fill("<?php echo $query3['name']; ?>")'><?php echo $query3['name']; ?></li>
<?php
}
}
?>
</ul>

css file

File Name : style.css

@CHARSET "ISO-8859-1";

body
{
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
}
ul
{
list-style: none;
margin: 17px 20px 20px 24px;
width: 330px;
}
li
{
display: block;
padding: 5px;
background-color: #ccc;
border-bottom: 1px solid #367;
}
#content
{
padding:50px;
width:500px; border:1px solid #666;
float:left;
}
#clear
{ clear:both; }
#box
{
float:left;
margin:0 0 20px 0;
text-align:justify;
}
input[type=text]
{width:330px; height:35px;}
input[type=submit]
{
width:90px; height:35px;
}

Ajax Program : How to Create Ajax Search Using PHP jQuery and MYSQL. Demos: itechtuto.com

File name : index.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.ittutorial.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.ittutorial.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Ajax Program : How to Create Ajax Search Using PHP jQuery and MYSQL. Demos: itechtuto.com</title>
<script type="text/javascript" src="../assets/jquery-1.2.6.min.js"></script>
<link rel="stylesheet" type="text/css" media="screen" href="css.css" />
</head>
<script language="javascript">
$(document).ready(function(){
//show loading bar
function showLoader(){
$('.search-background').fadeIn(200);
}
//hide loading bar
function hideLoader(){
$('#sub_cont').fadeIn(1500);
$('.search-background').fadeOut(200);
};

$('#search').keyup(function(e) {
if(e.keyCode == 13) {
showLoader();
$('#sub_cont').fadeIn(1500);
$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());
}
});

$(".searchBtn").click(function(){
//show the loading bar
showLoader();
$('#sub_cont').fadeIn(1500);
$("#content #sub_cont").load("search.php?val=" + $("#search").val(), hideLoader());
});
});
</script>
<body>
<h1>Ajax Program : How to Create Ajax Search Using PHP jQuery and MYSQL</h1>
<div class="textBox">
<input type="text" value="" maxlength="100" name="searchBox" id="search">
<div class="searchBtn">
&nbsp;
</div>
</div>
<br clear="all" />
<div id="content">
<div class="search-background">
<label><img src="loader.gif" alt="" /></label>
</div>
<div id="sub_cont">
</div>
</div>

<br clear="all" /><br clear="all" /><br clear="all" />
<a id="heading" href="http://www.99points.info/">99Points.info</a>
<div style="border:solid #000000 1px; background:#CC3333; color:#FFFFFF" align="center">
<a style=" text-decoration:none; font-size:18px;color:#FFFFFF" href="http://99Points.info"> Codeigniter , JQuery PHP Helping Demos on 99Points.info</a>
</div>
</body>
</html>

File name : search.php

<?php
function checkValues($value)
{
// Use this function on all those values where you want to check for both sql injection and cross site scripting
//Trim the value
$value = trim($value);
// Stripslashes
if (get_magic_quotes_gpc()) {
$value = stripslashes($value);
}
// Convert all &lt;, &gt; etc. to normal html and then strip these
$value = strtr($value,array_flip(get_html_translation_table(HTML_ENTITIES)));
// Strip HTML Tags
$value = strip_tags($value);
// Quote the value
$value = mysql_real_escape_string($value);
return $value;
}
include("dbcon.php");
$rec = checkValues($_REQUEST['val']);
//get table contents
if($rec)
{
$sql = "select * from ajax_search where text like '%$rec%'";
}
else
{
$sql = "select * from ajax_search";
}
$rsd = mysql_query($sql);
$total = mysql_num_rows($rsd);
?>
<?php
while ($rows = mysql_fetch_assoc($rsd))
{?>
<div class="each_rec"><a href="<?php echo $rows['link'];?>" target="_blank"><?php echo $rows['text'];?></a></div>
<?php
}
if($total==0){ echo '<div class="no-rec">No Record Found !</div>';}?>

File name : index.php

/* CSS Document */
.searchBtn {
float: left;
cursor: pointer;
width: 44px;
height: 38px;
line-height: 15px;
background-image: url(search_ico.PNG);
background-position: left 0;
background-repeat: no-repeat;
}

.searchProgress {
background-image: url(4.gif);
background-position: left 0;
float: left;
cursor: pointer;
width: 44px;
height: 38px;
line-height: 15px;
background-repeat: no-repeat;
}

.textBox input {
color: #999999;
font: bold 14px arial;
float: left;
height: 20px;
padding: 12px 0 0 9px;
vertical-align: middle;
width: 432px;
}

#content {
height: 400px;
text-align: center;
text-decoration: none;
width: 490px;
}

#content #sub_cont {
width: 490px;
display: none;
height: 400px;
}

#content .no-rec {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 5px;
border-bottom: solid #669900;
text-align: center;
background: #CCCC66;
}

#content .each_rec {
color: #fff;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 5px;
border-bottom: solid #669900;
text-align: justify;
background: #CCCC66;
}

#content .each_rec:hover {
background: #FFFFFF;
}

#content .each_rec a {
color: #000;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
text-decoration: none
}

.search-background {
display: none;
font-size: 13px;
font-weight: bold;
height: 160px;
position: absolute;
padding-top: 100px;
text-align: center;
text-decoration: none;
width: 470px;
}

#heading {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 56px;
color: #CC0000;
}

body {
text-align: center;
font-family: Arial, Sans-Serif;
font-size: 0.75em;
}

search-background label {
border: solid #66FF00 1px;
}

#paging_button ul {
width: 600px;
padding: 0px;
margin: 8px;
}

#paging_button ul li {
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
-moz-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
float: left;
height: 20px;
width: 20px;
list-style-image: none;
list-style-type: none;
font-weight: bold;
border: solid #CCCCCC 1px;
margin: 3px;
cursor: pointer;
}

li:hover {
color: #CC0000;
cursor: pointer;
}





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link