Autocomplete Search System Using PHP, JQuery

AOA, Hello our readers its been a while that I didn't make any tutorial because I was very but today I make a tutorial on how to make an autocomplete search box using PHP, JQuery, So you will enjoy this article and hopefully you will learn something new

First of all make database named it "search"

~~Demo~~ Download Demo link is not working please try again later.


CREATE TABLE IF NOT EXISTS `search` (
  `post_id` int(11) AUTO_INCREMENT PRIMARY KEY,
  `post_title` varchar(266) NOT NULL
);

Now Copy Index.php codes below


<!DOCTYPE html>
<html>
<head>
 <title>Search system using PHP OOP - Meralesson.com</title>
 <link rel="stylesheet" href="css/style.css"/>
 </head>
<body>
   <div class="div-center">
        <div class="inner">
         <ul>
            <h2>Meralesson</h2>
               <form action="" method="post">
                 <input type="text"  autocomplete="off" class="search" name="search" placehoder="Search..">
                 <span><input type="submit" name="submit" class="button"  value="Search" /></span>
               </form>
             <li><ul class="result">  
            </ul>
            </li>
            </ul>
        </div>
        <div class="content">
        </div>
      </div>
  <script type="text/javascript"src="js/jquery.js"></script>
 <script type="text/javascript"src="js/search.js"></script>
</body>
</html>

Copy search. is below, I make a function using keyup () function, So when user type something in the search field then this function gets search data from database using Ajax
search.js


$(document).ready(function(){
 //check if something typed in search field
 $('.search').keyup(function(){
     //bind search text into variable  
  var search = $(this).val();
  //then get data from database
  $.post('ajax/search.php',{search:search},function(data){
      //show return data 
   $('.result').html(data);
   //if user backspace then hide result 
    if(search==""){
    $(".result").html("");
    } 
    //if user clicked on result then add into search field
   $('.result li').click(function(){
    var result = $(this).text();
    $('.search').val( result);
    $('.result li').hide();
   }); 
   });
});

Now move on ajax make search.php in ajax folder copy and paste all code from below,


<?php 
 include '../core/init.php';
 $get = new main;
        //checking if post
 if(isset($_POST['search']) == true){
  $value = $_POST['search'];
                //Now get data from search php function
  $row = $get->search($value);
     foreach ($row as $search) {
          echo '
'.$search['post_title'].'
';
    }  
 }
        
?>

This is our main class that hold our all functions.


<?php
 class Main{
  public function search($value){
   global $pdo;
   //get data from database 
            $query = $pdo->prepare("SELECT * FROM `search` WHERE `post_title` LIKE ?  ");
   $query->bindValue(1,$value.'%');
    $query->execute();
   return $query->fetchAll();
  }
 }

 ?>

In the last step just copy all css to make the search system looks better


/* design by Meezan ud din */
*{
    margin: 0px;
    padding 0px;
    color: #333;
}
.div-center{
    margin: 0px auto;
    width:600px;
    height: auto;
    margin: 20% auto;
}
input[type="text"]{
    width: 400px;
    padding: 7px;
    margin: 4px;
    border:1px solid #ccc;
}
ul{
    list-style: none;
    background: white;
}
h2{
    font-size: 35px;
    margin-left: 150px;
    color: #3A3A3A;

}
.button{
    width: 100px;
    padding: 7px;
    background: white;
    border: 1px solid #ccc;
    font-family: san-sarif;
    
}
.button:hover,.button:active{
    border:2px solid skyblue;
    
}
ul li > ul{
    background: white;
    border: 1px solid #ccc;
    border-top: none;
    border-bottom: none;
    margin: -4px 4px;
    width: 414px;
    padding: 0px;
    color: #ADA5A5;
    font-family: sans-serif;
    font-size: 14px;
}
ul li > ul li{
    border-bottom: 1px solid #ccc;
    margin: 0px;
    padding: 5px 3px;
    color: #847D7D;
}

ul li > ul li:hover{
     color:#fff;
    cursor: pointer;
 }

 ul li > ul li a{
    text-decoration: none;
}

Meralesson

Search This Blog

Autocomplete Search System Using PHP, JQuery

Comments

Post a Comment