Tuesday, March 25, 2014

Tumblr & facebook like DropDown Search with jQuery & php

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.
Tumblr like Dropdown search with jQuery and PHP
Download Live Demo Watch Video


we have to create a table name `tumblr_search` were we have fields like id, name & pic
CREATE TABLE IF NOT EXISTS `tumblr_search` (
  `name` varchar(150) NOT NULL,
  `pic` text NOT NULL,
  PRIMARY KEY (`id`)


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"/>


 margin: 0px;
 padding: 0px;
 background:#529ecc url('https://24.media.tumblr.com/5e222941828bd79bec2bdaa8a309558a/tumblr_n2fks20OyJ1qzv12bo1_1280.jpg') no-repeat;
 background-size: 100% 100%;
 height: 700px;
 width: 800px;
 margin:0 auto;
 padding: 10px;
 color: black;
 font-weight: bold;
 font-size: 20px;
 color: white;
 float: right;
 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;
 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;


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">
  $('#search').bind('keyup', function(){
   var searchTerm = jQuery.trim($(this).val());
   if(searchTerm == ''){
    $('#search-container ul').html('');
    //send the data to the database
     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);


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
 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%' ";
    $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
   echo '<li>Not Found try hus</li>';