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

Previously I published the tutorial like live text search using jQuery

Also 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

</pre>

<div class="container">

<div class="search-container">

<div class="title float"><img alt="" src="friends.png" /> Friends</div>

<div class="textbox float"><input class="searchkeyword" type="text" autocomplete="off" name="search" placeholder="Search Your Friends" value="" /></div>

</div>

<div class="friendslist">

<div id="result_area"></div>

<div class="holder f1" id="KarthiKeyan">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn1/371909_1319387360_251100084_q.jpg" /></div>

<div class="name float"><a href="#">KarthiKeyan</a></div>

</div>

<div class="holder float" id="Roger">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/s100x100/1394392_10152349638699418_1744583684_s.jpg" /></div>

<div class="name float"><a href="#">Roger</a></div>

</div>

<div class="holder float" id="Alexander Mani">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/t1/c0.59.180.180/s100x100/554716_10151755894810592_1661084681_a.jpg" /></div>

<div class="name float"><a href="#">Alexander Mani</a></div>

</div>

<div class="holder float" id="Sasi Kumar">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c0.0.180.180/s100x100/60884_2561428051507_1284327473_a.jpg" /></div>

<div class="name float"><a href="#">Sasi Kumar</a></div>

</div>

<div class="holder float" id="Hevron Roger">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-prn2/c0.21.180.180/s100x100/1471170_634106263294172_1312343903_a.jpg" /></div>

<div class="name float"><a href="#">Hevron Roger</a></div>

</div>

<div class="holder float" id="Toeng Sikung">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash2/c23.0.135.135/s100x100/1455080_688186334539055_2024100857_a.jpg" /></div>

<div class="name float"><a href="#">Toeng Sikung</a></div>

</div>

<div class="holder float" id="Karthi">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c32.9.117.117/s100x100/230319_2062399516571_8118565_a.jpg" /></div>

<div class="name float"><a href="#">Karthi</a></div>

</div>

<div class="holder float" id="Kumar">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c0.0.180.180/s100x100/60884_2561428051507_1284327473_a.jpg" /></div>

<div class="name float"><a href="#">Kumar</a></div>

</div>

<div class="holder float" id="Hevron Roger">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c0.0.180.180/s100x100/60884_2561428051507_1284327473_a.jpg" /></div>

<div class="name float"><a href="#">Hevron Roger</a></div>

</div>

<div class="holder float" id="Sasi">

<div class="photo float"><img alt="" src="https://fbcdn-profile-a.akamaihd.net/hprofile-ak-ash3/c32.9.117.117/s100x100/230319_2062399516571_8118565_a.jpg" /></div>

<div class="name float"><a href="#">Sasi</a></div>

</div>

</div>

</div>

<pre>