Facebook like live search using jquery

    This is simple and most useful script inspired by facebook friends live search script. Live search script can definitely help you create a interactive user experience. I have already posted few tutorials about creating better UI experience. Live search using jquery script can be integrated easily on any page where you are listing products, user profiles, news, blog posts etc.
  *{
	font-family : 'lucida grande',tahoma,verdana,arial,sans-serif;		
  }
  .holder{
	width: 850px;
	border: 1px solid #C4CDE0;
	border-radius: 2px;	
    margin: 0% 18%;
	height: auto;
	overflow: hidden;
  }
  .search-holder{
	margin: 3px;
	background: #ECEFF5;
	border-bottom: 1px solid #C4CDE0;
	height: 50px;
  }
  .title{
	font-size: 16px;
	font-weight: bold;
	width: 70%;
	color: #333333;
	margin-left: 20px;
  }
  .fl{
	float: left;
	line-height: 50px;
  }
  .textbox{
	margin-top: 15px;	
  }
  .textbox input{
	border: 1px solid #C4CDE0;
    outline: medium none;
    padding: 2px;
    width: 190px;
	font-size: 11px;
	height: 22px;
  }
  .friends{
	 margin: 20px 25px;
  }
  .friend_holder{
	border-bottom: 1px solid #B2B2B2;
	width: 46%;
	height: 100px;
	margin-bottom: 5px;
	margin-top: 10px;
	margin-right: 10px;
  }
  .name{
	margin-left: 10px;
  }
  .name a{
	font-size: 12px;
	font-weight: bold;
    color: #3B5998;
    cursor: pointer;
    text-decoration: none;	
  }
  .name a:hover{
    text-decoration: underline;	
  }

Simple html layout.
This could be made simple using tables but by using tables you couldnt achieve smooth animation effect so here we will be using div (Actually, I prefer designing using divs only, that makes me perfect every-time i design new script as well as users get the best).

 <body>
   <div class="holder">
     <div class="search-holder">
	   <div class="title fl">Friends</div>
	   <div class="textbox fl">
		  <input type="text" name="search" class="search" value="" placeholder="Search Your Friends" autocomplete="off">	
	   </div>
	 </div>
	 <div class="friends">
		<?
			$friends = array(
				'sample name 1'=>'photos/1.jpg',
				'sample name 2'=>'photos/2.jpg',
			);

			foreach($friends as $name=>$photo){
				echo '<div class="friend_holder fl" id="'.$name.'">';
				echo '<div class="photo fl"><img src="'.$photo.'"></div>';
				echo '<div class="name fl"><a href="#">'.$name.'</a></div>';
				echo '</div>';
			}
		?>
	 </div>
   </div>			  
 </body>

There is nothing rocket science like in jquery part, The most important part of the script is in just one line which is

$(this).attr("id").match(new RegExp(str, "i")

The “i” in the RegExp performs case insensitive search. Remaining part is common to other jquery codes. have a look.

$(document).ready(function(){
	$(".search").keyup(function(){
		var str = $(".search").val();
		$(".friends .friend_holder").each(function(index){
			if($(this).attr("id")){
				if(!$(this).attr("id").match(new RegExp(str, "i"))){
					$(this).fadeOut("fast");
				}else{
					$(this).fadeIn("slow");
				}
			}
		});		
	});
});

About Amit

   Myself Amit Patil from Maharashtra (India). I have been working as a Web Application Developer from last 5+ years, and its my passion to learn new things and implement them as a practice. Basically i am a PHP developer but now a days exploring more in CSS and javascript.

Comments

  1. Can this be used to search an entire database or does it just text on that specific page? Great tutorial and thanks for sharing.

    • Actually its a javascript based search so it will work only on local machines, witch means you cant use it to search the data in database.

  2. Ian Onyango says:

    Hey Amit,

    I’m new to programming, pardon me if this sounds trivial but could sometimes its a bit difficult to follow along with your tutorials. Don’t get me wrong, your explanations are clear and concise.

    The problem is, some of us can’t figure out how exactly the lines of codes piece together in (their respective files), and thus we can’t come up with fully functional implementations of this tutorial.

    I would like to experience the joy of actually hacking it & seeing it work on my localhost. That being said, it would mean a lot if you could provide the files for download.

    Regards.

  3. Hey Amit

    I was watching your work and is pretty good, I like it a lot.

    I would like to ask you with this live search, can we do it for our database?

    I know your code is on java and only for the localhost, but I would like to ask if we can do it for the database

    Kind regards

    • There are 2 ways if you have less records you can fetch all of them and then use same script and second is, if you have large number of records then you can use ajax search which will little slower compared to this script.

  4. I want like dropdown search while searching it. how to implement that one ?

Speak Your Mind

*


*

Notify me of followup comments via e-mail. You can also subscribe without commenting.

More in CSS, html5, jQuery (4 of 40 articles)


Twitters bootstrap is a toolkit for crating rich, interactive, responsive and cross device compatible UI designing. You just have ...