FaceBook Like Search-Box with Jquery

4

Well every web develepor strives for Facebook style elements in his application. So I prefer to write Facebook style scripts to help my readers. This time I have developed Facebook style search box using Jquery. This time I have put the element of JSON as a medium of data transfer between server and client. I have not used database in this script. But curious develepors can try it using database backend. The script also supports keyboard inputs like up and down arrows.
If you face any problem using this script, dont hesitate to write to me. I am always there to help you out…
Enjoy the live demo!

Live Demo Download Script

The HTML Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>WebSpeaks.in</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style>
.main{
font-family:Tahoma;
width:300px;
margin-left:200px;
height:500px;
}
.heading{
background-color:#2859AA;
border:1px solid #121649;
color:#FFFFFF;
font-weight:bold;
font-size:14px;
padding:3px;
text-align:center;
}
#search-text{
border:2px solid #435FBC;
width:200px;
height:20px;
padding:3px;
color:#A4A4A4;
font-weight:bold;
}
.placeholder{
background-color:#E0E0E0;
}
.autocomplete{
width:200px;
left:0px;
top:-15px;
position:relative;
margin-left:-30px;
}
.autocomplete li{
font-size:12px;
background-color:#728ADC;
border-bottom:1px dotted #ffffff;
color:#FFFFFF;
padding:2px 0px 2px 5px;
line-height:20px;
display:block;
margin: 0px;
cursor: pointer; 
}
.autocomplete li:hover, .selected{
font-weight:bold;
background-color:#000000;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
 var searchLabel = $('#search label').remove().text();
 $('#search-text').addClass('placeholder').val(searchLabel)
 .focus(function()
 {
  if (this.value == searchLabel)
  {
   $(this).removeClass('placeholder').val('');
  };
 }).blur(function()
 {
  if (this.value == '')
  {
   $(this).addClass('placeholder').val(searchLabel);
  };
 });
 $('#search').submit(function()
 {
  if ($('#search-text').val() == searchLabel)
  {
   $('#search-text').val('');
  }
 });
 
 var $autocomplete = $('<ul class="autocomplete"></ul>').hide().insertAfter('#search-text');
 var selectedItem = null;
 var setSelectedItem = function(item)
 {
  selectedItem = item;
  if (selectedItem === null)
  {
   $autocomplete.hide();
   return;
  }
  if (selectedItem < 0)
  {
   selectedItem = 0;
  }
  if (selectedItem >= $autocomplete.find('li').length)
  {
   selectedItem = $autocomplete.find('li').length - 1;
  }
  
  $autocomplete.find('li').removeClass('selected').eq(selectedItem).addClass('selected');
  $autocomplete.find('li').css({'backgroundColor':"#728ADC"}).eq(selectedItem).css({'backgroundColor':"#000000"});
  $autocomplete.show();
 };
 
 var populateSearchField = function()
 {
  $('#search-text').val($autocomplete.find('li').eq(selectedItem).text());
  setSelectedItem(null);
 };
 
 $('#search-text').attr('autocomplete', 'off').keyup(function(event)
 {
  if (event.keyCode > 40 || event.keyCode == 8) {
  // Keys with codes 40 and below are special
  // (enter, arrow keys, escape, etc.).
  // Key code 8 is backspace.
  $.ajax({
  'url': 'autoComplete.php',
  'data': {'search-text': $('#search-text').val()},
  'dataType': 'json',
  'type': 'POST',
  'success': function(data)
  {
   if (data.length)
   {
    $autocomplete.empty();
    $.each(data, function(index, term)
    {
     $('<li></li>').text(term).appendTo($autocomplete)
     .mouseover(function()
     {
      setSelectedItem(index);
     }).click(populateSearchField);
    });
    setSelectedItem(0);
   }
   else
   {
    setSelectedItem(null);
   }
  }
  });
 }
 else if (event.keyCode == 38 && selectedItem !== null)
 {
  // User pressed up arrow.
  setSelectedItem(selectedItem - 1);
  event.preventDefault();
 }
 else if (event.keyCode == 40 && selectedItem !== null)
 {
  // User pressed down arrow.
  setSelectedItem(selectedItem + 1);
  event.preventDefault();
 }
 else if (event.keyCode == 27 && selectedItem !== null)
 {
  // User pressed escape key.
  setSelectedItem(null);
 }
 }).keypress(function(event)
 {
  if (event.keyCode == 13 && selectedItem !== null)
  {
   // User pressed enter key.
   populateSearchField();
   event.preventDefault();
  }
  }).blur(function(event)
  {
   setTimeout(function(){setSelectedItem(null);}, 250);
  });
});
</script>
</head>

<body>
<div class="main">
 <div class="heading">Facebook Like Search Box</div><br/>
 <form id="search">
 <label for="search-text">search the site</label>
 <input type="text" name="search-text" id="search-text" />
 </form>
</div>
</body>
</html>

autoComplete.php

<?php
if (strlen($_REQUEST['search-text']) < 1)
{
 print '[]';
 exit;
}
$terms = array(
'arvind',
'arvind b',
'arvind bhardwaj',
'arvind_bh',
'arvind07',
// List continues...
'xaml',
'xoops',
);
$possibilities = array();
$searchText=$_REQUEST['search-text'];
foreach ($terms as $term)
{
 if (strpos($term, strtolower($_REQUEST['search-text'])) === 0)
 {
  $possibilities[] = "'". str_replace("'", "\'", $term) ."'";
 }
}
print ('['. implode(', ', $possibilities) .']');
?>

Written by Arvind Bhardwaj

Arvind is a certified Magento 2 expert with more than 10 years of industry-wide experience.

Website: http://www.webspeaks.in/

4 thoughts on “FaceBook Like Search-Box with Jquery”

Comments are closed.