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
Demo
Download Demo link is not working please try again later.
First of all make database named it "search"
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;
}
Thank you for the tutorial, came to know of your website from a share on Facebook, will be following your posts from now. :)
ReplyDeleteThankyou
Delete