PHP Search using Ajax and jQuery | Lessoncup Programming Blog

Thursday, 21 November 2013

PHP Search using Ajax and jQuery

Hi, today i am going to show you how to develop a search engine using php ajax and jquey, it is very useful and complected task and we have seen this feature in many websites like quikr, olx and other matrimony sites. we should take three tables like country, city and users table and these table should have relation to each other.




HTML

in html take the input box and give it id name #search and take country and city list menus and display the users from user table in input box ( check my previous lesson to show the results on keyUp php auto complete ) and display the countries from country table in select menu ( check my previous lesson dynamic depended selectboxes )

take one results div to display the matched results from users table
<div id="lessoncup">

<h1 style="margin:5px;">Enter keyword Select Country, City and click search</h1>
<table width="700" border="0" cellspacing="0" cellpadding="5">
  <tr>
    <td width="33%" height="40" align="left" valign="middle" bgcolor="#0066CC">
    <input name="" type="text" id="search" class="search" placeholder="Enter keywords">
  
  <div id="response"></div></td>
    <td width="6%" height="40" align="left" valign="middle" bgcolor="#0066CC"><div id="loader" class="loader"></div></td>
    <td width="15%" height="40" align="left" valign="top" bgcolor="#0066CC"><select name="" class="sbox" id="country">
      <option value="">Country</option>
      <?php
   $country=mysql_query("select * from country order by country_name");
   while($full=mysql_fetch_array($country)){
   ?>
      <option value="<?php echo $full['country_id']?>"><?php echo $full['country_name']?></option>
      
      <?php }?>
  </select></td>
    <td width="5%" align="left" valign="middle" bgcolor="#0066CC"><div id="loaderc" class="loader"></div></td>
    <td width="29%" align="left" valign="top" bgcolor="#0066CC"> <select name="" class="sbox" id="city">
      <option value="">City</option>
      
      </select></td>
    <td width="12%" align="right" valign="middle" bgcolor="#0066CC">
    
    <a id="search_btn">Search</a>
    
    </td>
    </tr>
</table>

<div id="load"></div>
<div id="results"></div>

</div>

CSS

<style>

#lessoncup{width:800px; height:300px; border:solid #CCC 0px; padding:5px; margin:0 auto; font-family:Arial, Helvetica, sans-serif; font-size:11px; margin-top:100px;}

#inputbar{ width:100%; height:33px; padding:5px; background-color:#039;}

.search{-webkit-box-shadow: 0 1px 1px #EAEAEA;
box-shadow: 0 1px 1px #EAEAEA;border-radius:5px; background-color:#EAEAEA; border:solid #F0F0F0 1px;padding:10px; outline:none; color:#333; font-size:16px; width:200px; float:left;}

#response{-webkit-box-shadow: 0 1px 1px #EAEAEA;
box-shadow: 0 1px 1px #EAEAEA;width:208px; height:auto; border:solid #EAEAEA 1px; background-color:#FFF; padding:5px; display:none; margin-top:40px; 
margin-left:1px; position:absolute;}

.loading{ margin-top:7px; margin-left:5px; color:#FFF; float:left;}

.list{ margin:0; padding:0; list-style:none;}

.list li{ padding:5px; padding-left:0;text-transform:capitalize;}

.list li:hover{ background-color:#D2D2FF;cursor:pointer; font-weight:bold;}

.list img{border:solid #999 1px; width:40px; margin:2px;}


#form{ margin:0 auto; margin-top:30px; margin-bottom:30px; width:350px;}

.sbox{-webkit-box-shadow: 0 1px 1px #EAEAEA;
box-shadow: 0 1px 1px #EAEAEA;padding:10px; float:left; border-radius:5px; background-color:#EAEAEA; float:left; border:solid #F0F0F0 1px; margin-right:10px; text-transform:capitalize;}

.loader{ width:30px;}

#search_btn{width:80px; padding:10px; font-size:14px; background-color:#000; border-radius:5px;-webkit-box-shadow: 0 0 3px #EAEAEA;box-shadow: 0 0 3px #EAEAEA; color:#FFF; cursor:pointer;}


#results{ width:690px; height:auto; padding:5px; border:solid #CCC 1px; margin-top:30px; display:none; overflow:hidden;}

#load{ width:50px; position:absolute;}

.imgs{float:left; margin:10px; border:solid #CCC 5px;}

</style>

JAVASCRIPT

here i am not writing about to display the auto complete and depended select boxes because the related content is available in my previous lessons.

write the click function to search button and get the values from input box and county and city boxes and store it in one variable.

now request search.php file using ajax request and send the stored variable to this file and display the response message into results div in ajax success function.  
<script type="text/javascript" src="jquery-1.10.2.min.js"></script>

<script>


$(document).ready(function(){
 
 
 $('#search').keyup(function(){
  
  
  var name = $('#search').val();
  
  if(name.length==0){
   
   $('#response').html("Please enter to search records");
   
  }else{
  
  $("#loader").fadeIn(400).html('<div class="loading"><img src="loader.gif" align="absmiddle"></div>');
   
  var datasend = 'string='+name;
  
  $.ajax({
   
   type: "POST",
   url: "searchstring.php",
   data: datasend,
   success: function(msg){
    
    $("#loader").fadeOut(200);
    $('#response').fadeIn(200).html(msg);
    
   }
   
  });
  
 }

 });
 
 
 $('body').on("click",".list li",function(){
  
  var name = $(this).text();
  
  $('#search').val(name);
  $("#response").fadeOut('slow');
  
 });
 
 $(document).click(function(){
  $("#response").fadeOut('slow');
 });
 
 
 $('#country').change(function(){
  
  var val = $('#country').val();
  
  var datasend='country='+val;
  
  
$('#loaderc').fadeIn(400).html('<img src="loader.gif" align="absmiddle">');
  
  $.ajax({
   
   type:"POST",
   data:datasend,
   url:'citys.php',
   cache:false,
   success:function(msg){
    
    $('#city').html(msg);
    
    $('#loaderc').fadeOut("slow");
    
   }
   
  });
  
  
 });
 
 
 
 $('#search_btn').click(function(){
  
  var keyword = $('#search').val();
  
  var country = $('#country').val();
  
  var city = $('#city').val();
  
 var searchData = "key="+keyword+"&country="+country+"&city="+city;
  
 $('#load').fadeIn(400).html('<img src="loader.gif" align="absmiddle">');
  
  $.ajax({
   
   type:"POST",
   data:searchData,
   url:'search.php',
   cache:false,
   success:function(msg){
    
    $('#results').fadeIn("slow").html(msg);
    
    $('#load').fadeOut("slow");
    
   }
   
  });
  
 });
 

});

</script>

searchstring.php

<?php
extract($_REQUEST);
include('db.php');

$getnames=mysql_query("select DISTINCT name,icon from infogall where name like '".$string."%' limit 0,10");
if(mysql_num_rows($getnames)==0){
 
 echo "No results found";
 
}else{

 echo '<ul class="list">';
  while($row = mysql_fetch_array($getnames)){
   
   echo '<li><img src=userimage/'.$row['icon'].' align=middle>'.$row['name'].'</li>';
   
  }
  
 echo '</ul>';
 
}

?>

search.php

connect this file to database and write the conditions to match any one of column in table with the requested variables form ajax, like country, city and key these three variables are created in jquery code.

and here match the each column with each related variable and store all conditional query's in one variable in each if condition, the variable name is "extra"

in final step write the query to fetch the records from infogall table and put the extra variable in where condition and loop the matched rows.
<?php
extract($_REQUEST);
include('db.php');

if($country !='') {

$extra.="and country ='".$country."'";

}

if($city !='') {

$extra.="and city='".$city."'";

    } 

if($key!='') {

$extra.="and name LIKE '%".$key."%'";

}


$getusers=mysql_query("select * from infogall where 1=1 ".$extra."");
if(mysql_num_rows($getusers)==0){
 
 echo "no matched results found";
 
}else{

while($full=mysql_fetch_array($getusers)){
 
 echo '<img src=userimage/'.$full['image'].' class="imgs">';
 
}
}

?>

Live Demo   Download Script

12 comments :

  1. enter sachin, sourav , shahid in keyword box

    ReplyDelete
  2. I don't see the point of sharing such low quality code. Besides security vulnerabilities, a lot of messy inline css/js spaghetti code..

    ReplyDelete
    Replies
    1. what kind of security you want brother .. and ya we can put external css and js links
      but it is a basic search engine which i have posted..

      Delete
    2. This comment has been removed by the author.

      Delete
    3. Hello Yaxeca Art Group, If you want external css ,js links and more security code then pay money to Khasim. He is serving hard and proving free code for our learning and development. So, try to encourage him for his free code, don't try to discourage him.

      Delete
    4. My point is not about motivation, but suggestion at least consider basics of security ( think about sql injections, escaping user input ). If intention of this code is to teach people why not to teach better practises. On js side I suggest looking to modular pattern if you want actually to use it somewhere else besides this tutorial. ( think about polluting global scope, keeping state and privacy of your app )

      Delete
    5. +yax eca i support u !
      there is lot of vulnerability! better use pdo prepared statements!
      jquery ajax is too old tuts ! there are lot of tuts in lot of blogs!
      try something new such node.js if u can!

      Delete
  3. Hi brother this Tutorial was awesome. I am getting Ajax response but image is not displaying along with the text, only text is displaying. How to link text with the image please display Database structure. Please suggest me how to solve this error brother.
    Thank you.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. if you not found jquery file in downloaded folder .. you can download jquery file from jquery website

    ReplyDelete
  6. hi great work but plz help me my searchstring.php is working but search.php is not im getting error on line 7... plz help i think im doing wrong database

    ReplyDelete

Mohammad Khasim
Blogger | Web Developer
Hyderabad - INDIA
lessoncup@gmail.com

PHP | My SQL | JQUERY
Web Development Tools | CMS | Frameworks | SEO

Get my Latest Lessons