Search Box with Result using jQuery Ajax PHP
This tutorial about Search Box with Results using jQuery, Ajax and PHP. Using Ajax and jQuery when you click on search button then results will display on the same page. This is very easy and simple. So lets start
The script contains image with three PHP files.
searchingdata.php // Ajax Page
connection.php // Database Connection File
image
index.php // Main index file show data
index.php
Index page mainly for showing result. And also from this page ajax function execute.<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UandBlog.com Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "searchingdata.php",
data: dataString,
cache: false,
beforeSend: function(html)
{
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader_2.gif" /> Loading Results...');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
<body style="background:#CCCCCC;">
<h1 style="text-align:center;"><a href="www.uandblog.com">www.uandblog.com</a></h1>
<div style="width:500px; margin:0 auto; margin-top:100px; background:#FFFFFF; padding:20px;">
<form method="get" action="">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" />
</form>
<br />
<div id="searchword">
Search results for <b><span class="searchword"></span></b></div>
<div id="flash"></div>
<ol id="insert_search" class="update" style="color:#990000;">
</ol>
</div>
</body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>UandBlog.com Demo</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script type="text/javascript">
$(function()
{
$(".search_button").click(function()
{
var search_word = $("#search_box").val();
var dataString = 'search_word='+ search_word;
if(search_word=='')
{
}
else
{
$.ajax({
type: "GET",
url: "searchingdata.php",
data: dataString,
cache: false,
beforeSend: function(html)
{
document.getElementById("insert_search").innerHTML = '';
$("#flash").show();
$("#searchword").show();
$(".searchword").html(search_word);
$("#flash").html('<img src="ajax-loader_2.gif" /> Loading Results...');
},
success: function(html){
$("#insert_search").show();
$("#insert_search").append(html);
$("#flash").hide();
}
});
}
return false;
});
});
</script>
</head>
<body style="background:#CCCCCC;">
<h1 style="text-align:center;"><a href="www.uandblog.com">www.uandblog.com</a></h1>
<div style="width:500px; margin:0 auto; margin-top:100px; background:#FFFFFF; padding:20px;">
<form method="get" action="">
<input type="text" name="search" id="search_box" class='search_box'/>
<input type="submit" value="Search" class="search_button" />
</form>
<br />
<div id="searchword">
Search results for <b><span class="searchword"></span></b></div>
<div id="flash"></div>
<ol id="insert_search" class="update" style="color:#990000;">
</ol>
</div>
</body>
</html>
searchingdata.php
<?php
include('connection.php');
if(isset($_GET['search_word']))
{
$search_word=$_GET['search_word'];
$search_word_new=mysql_escape_string($search_word);
$search_word_fix=str_replace(" ","%",$search_word_new);
$sql=mysql_query("SELECT * FROM blog WHERE p_title LIKE '%$search_word_fix%' ORDER BY b_id DESC LIMIT 10");
$count=mysql_num_rows($sql);
if($count > 0)
{
while($row=mysql_fetch_array($sql))
{
$msg=$row['p_title'];
$bold_word='<b>'.$search_word.'</b>';
$final_msg = str_ireplace($search_word, $bold_word, $msg);
?>
<li><?php echo $final_msg; ?></li>
<?php
}
}
else
{
echo "<li>No Results</li>";
}
}
?>
include('connection.php');
if(isset($_GET['search_word']))
{
$search_word=$_GET['search_word'];
$search_word_new=mysql_escape_string($search_word);
$search_word_fix=str_replace(" ","%",$search_word_new);
$sql=mysql_query("SELECT * FROM blog WHERE p_title LIKE '%$search_word_fix%' ORDER BY b_id DESC LIMIT 10");
$count=mysql_num_rows($sql);
if($count > 0)
{
while($row=mysql_fetch_array($sql))
{
$msg=$row['p_title'];
$bold_word='<b>'.$search_word.'</b>';
$final_msg = str_ireplace($search_word, $bold_word, $msg);
?>
<li><?php echo $final_msg; ?></li>
<?php
}
}
else
{
echo "<li>No Results</li>";
}
}
?>
connection.php
<?php
$conn = mysql_connect("localhost", "root", "");
if(!$conn) die("Failed to connect to database!");
$status = mysql_select_db('a_blog', $conn);
if(!$status) die("Failed to select database!");
?>
$conn = mysql_connect("localhost", "root", "");
if(!$conn) die("Failed to connect to database!");
$status = mysql_select_db('a_blog', $conn);
if(!$status) die("Failed to select database!");
?>
You may also like
Comments ( 0 )
Subscribe Latest Information
Categories
Most Popular Posts
How to Withdraw Money from ATM Machine 7steps 989114 Views
How to Create Chat Application in Android Studio 135060 Views
Top 10 Best Android Games Under 100MB 80520 Views
You May Like Also
How to Create a Captcha Code using PHP 6132 Views
How to Integrate CKEditor in Web Page using PHP 10147 Views