Hi,
In this post, I will discuss how to create a friend selection widget as in Facebook. When ever you are inviting your friends, or sending some application request to your friend in Facebook, you might get a friend selection widget as below:
In the above, as you start typing the name of your friend, the list below gets filtered quickly accordingly. This is not refreshing the page nor is calling any AJAX. The whole thing is in realtime. Also you can select/unselect 1 or more friend by clicking them. And finally when you click the "Send Request" button the form gets submitted with selected friends user id. This is how I have achieved this.
Code and Explanation:
First you need to download the entire source code from here. Now here is the basic HTML:
