X
    Categories: FacebookJquery

Facebook Style Search Friends using jQuery

Today I unfortunately used facebook for a long time & I was able to search for a friend. There I found nice user interface like instant friend search by typing friend name in the search box.

Here I have used jQuery to search friends like facebook style. With just a few lines of jQuery code and a small text input box you can add a search members / users / friends to any web projects

I have used javascript RegExp function to performs case insensitive search.

jQuery code

$(document).ready(function(){
    $(".searchkeyword").keyup(function(){
        var str = $(".searchkeyword").val();
		var count = 0;
//loop through the friendslist
$(".friendslist .holder").each(function(index){
            if($(this).attr("id")){
				//case insenstive search
                if(!$(this).attr("id").match(new RegExp(str, "i"))){
                    $(this).fadeOut("fast");
                }else{
                    $(this).fadeIn("slow");
					count++;
                }
            }
        });
		//display no of results box when str is not empty
		if(str == '') { $("#result_area").hide(); } else { $("#result_area").show(); }
		//display no of results found
		$("#result_area").text("Top "+count+" results for "+str);
    });
});

The jQuery code for this trick is really easy and all we are doing is basically getting the input text value from the search box & checking that value against our list of friends in the “friendslist” div and showing those friends matches the searched keyword. The count of the number of matched friends is then displayed in our “result_area” div tag.

HTML Code


<div class="container">
<div class="search-container">
<div class="title float"><img src="friends.png" />&nbsp;Friends</div>
<div class="textbox float">
<input type="text" name="search" class="searchkeyword" >
Please don't forget to share and subscribe to latest updates of the blog. Comments and feedbacks are always welcome!
Marimuthu: