Like Us on Facebook

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>
 

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>";
            }
    }
?>
 

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!");
?>

 

Posted By UandBlog

UandBlog is a Global Leading source of Finance, Health, Lifestyle, Technology, Gaming and Programing and other information, it is a fastest growing blog for all , for latest post or information like us on facebook , follow on Twitter, Google+ and Pinterest.

Comments ( 0 )

    Leave a comment..

    Click to login.