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.
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.
