HighOnCoding.com: Implementing Facebook like Suggest Search Box

Implementing Facebook like Suggest Search Box

AzamSharp
Published Date: 7/28/2009 6:47:00 PM
Views: 15376

Abstract:
In the last article we implemented an Auto-Suggest TextBox which was capable of displaying the images in the suggestions. In this article we are going to enhance the Auto-Suggest TextBox to make is work like the Facebook Search TextBox.
What is Facebook Search TextBox?

If you have a Facebook account and have lots of friends then you should already be familiar with this feature. The search box allows you to search for your friends, groups etc. Take a look at the image below:

As, you can see in the above image Facebook search box is giving suggestions related to our typed characters. It does not matter if you type the first name or the last name since it is automatically matched by the suggestion box. Let's see how we can implement the same feature for your Auto-Suggest application.

Recommended Reading:

Most of this article will be based on the previous article "Implementing Auto-Suggest Using AutoCompleteExtender". We highly recommend that you read that article first.

Fetching Records Based on Any Matched SubString:

The previous article assumed that you already know a part of the first name of the person. It means if you are searching for "John Doe" then you know that his name starts with a "J". Unfortunately, in real life this is different. You may only know part of the person's name. This can be either the first name or the last name.

The code looks almost similar to the old GetCustomers method with one minor change. We are now using the "IndexOf" method instead of "StartsWith". IndexOf method will return "0" or greater than "0" to indicate that the prefixText was found in the string. The remainder of the code identical.

Applying Styles to the Search Text:

Our next task is to apply style to the search text. We are going to perform this in the JavaScript function.

The important part to notice in the above code is the following line:

We are combining the FirstName and LastName and then applying the replace function to the concatenated name. The regular expression searched for the searchText and replace it with the custom style which in this case is composed of the font element and the HTML bold element.

The effect is shown below:

You can also search the customer by using any part of the name as shown below:

Conclusion:

In this article we learned how to implement a Facebook like search display. The article demonstrated how to apply styles to the searched text which makes more attractive appearance and a experience.

[Download Sample]

Comments/Feedbacks


	Subject: Selected Person return null ? Name: Guney Date: 8/10/2009 2:13:38 AM Comment: When I select a person from list it returns null ? How can I implement for "FirstName". Thnks.


	Subject: Great article Name: rob Date: 9/4/2009 12:37:05 AM Comment: Great article! I read it on: http://thatstoday.com/article/669908/implementing-facebook-like-suggest-search-box


	Subject: Confused Name: Zam Date: 10/24/2009 9:59:14 PM Comment: Great article, but I'm a bit confused.. I've got my id now in my client side javascript function, but not sure how to pass it off to another call from the client side to the server side. I'm still learning. By the way, everthing works for me up until I click on the alert box (showing the correct ID value btw). Once I click okay, the text box is filled with null.


	Subject: RE: Confused Name: Mohammad Azam Date: 10/28/2009 10:39:53 AM Comment: Hi Zam, Basically after getting the id from the client side I am just invoking the server side method using Ajax. Check out the basic Ajax articles on HighOnCoding to understand how Ajax calls works.