Hi Guyz in this post i am going to teach u how to create a tumblr like drop down search with jQuery and php. Its really simple and easy but looks very greate and give very nice user interface to the website.
Download
Live Demo
Watch Video
 |
| Tumblr like Dropdown search with jQuery and PHP |
Database
we have to create a table name `tumblr_search` were we have fields like id, name & pic
CREATE TABLE IF NOT EXISTS `tumblr_search` ( `id` int(11) NOT NULL AUTO_INCREMENT, `name` varchar(150) NOT NULL, `pic` text NOT NULL, PRIMARY KEY (`id`) ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ;
html
html is super easy in this we have a <input> field with id search and a <ul> tag
<div id="container"> <div id="search-container"> <input id="search" type="search" placeholder="Quick Search"/> <ul> </ul> </div> </div>
css
body{
margin: 0px;
padding: 0px;
background:#529ecc url('https://24.media.tumblr.com/5e222941828bd79bec2bdaa8a309558a/tumblr_n2fks20OyJ1qzv12bo1_1280.jpg') no-repeat;
background-size: 100% 100%;
}
#container{
height: 700px;
width: 800px;
margin:0 auto;
padding: 10px;
}
a{
color: black;
font-weight: bold;
font-size: 20px;
}
h1{
color: white;
}
#search-container{
float: right;
}
#search{
height: 25px;
width: 180px;
font-weight: bold;
color: #444;
border-radius: 15px;
border: 1px solid transparent;
outline: none;
padding: 7px;
background: white;
opacity: 0.6;
}
#search:focus{
opacity: 1.0;
}
#search-container ul{
list-style: none;
margin: 0px;
padding: 0px;
margin-top: 10px;
}
#search-container ul li{
height: 30px;
border: 1px solid #ccc;
background: white;
padding: 3px;
font-family: verdana;
}
#search-container ul li:hover{
background: lightblue;
cursor: pointer;
}
#search-container ul li img{
height: 31px;
border-radius: 5px;
float: right;
}
javaScript
In javascript we are getting the value of your input field and sending it to the search.php page were all the result from the database is fetched and putting the response from the search.php page in the <ul>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#search').bind('keyup', function(){
var searchTerm = jQuery.trim($(this).val());
if(searchTerm == ''){
$('#search-container ul').html('');
}else{
//send the data to the database
$.ajax({
url: 'search.php',
type: 'GET',
data: {search:searchTerm},
beforeSend: function(){
$('#search-container ul').html('<li>Loading...</li>');
},
success: function(data){
$('#search-container ul').html(data);
}
});
}
});
});
</script>
Search.php
in search.php we are spliting the search term with preg_split function and in the foreach loop we are creating the query if the term is 1 then search only name and if term is more than 1 we prefix and in the query. then we are fetching the data from the database and displaying the result
<?php
/*
code For Connecting to the databse
*/
if (isset($_GET['search']) && !empty($_GET['search'])) {
$search = mysql_real_escape_string($_GET['search']);
$terms = preg_split('/[\s]+/', $search);//split the search term
$term_count = 0;
$query = '';
foreach ($terms as $term) {
$term_count ++;
if($term_count == 1){
$query .= "`name` LIKE '%$term%' ";
}else{
$query .= "AND `name` LIKE '%$term%'";
}
}
//execute the query
$result = mysql_query("SELECT * FROM tumblr_search WHERE $query");
//if result found
if(mysql_num_rows($result) > 0){
while($row = mysql_fetch_assoc($result)){
echo '<li>'.$row['name'].'<img src="'.$row['pic'].'"></li>';
}
//result not found
}else{
echo '<li>Not Found try hus</li>';
}
}
?>
