Problem: Give data-entry folks the ability to search through high schools in a quick and efficient manner. The user should be able to search by high school name, city or zip and it should not to affect the user's productivity. Note: This is in a web-based environment.
Solution: Extend the existing AjaxControlToolkit autocomplete control to provide similar functionality to the Facebook’s search control. See screen shots below.
Sample Solution and Source Code
Search By Name:
Search by Zip:
Search By City:
Add Watermark:
The solution fits all our clients’ criteria.
Fast: The control is fast for a number of reasons. First off we are not rendering all the high schools on the client side. Instead we are using Ajax calls to retrieve the list of high schools from a web-service. Since the high school information in our database doesn't change very often we cache the results with an expiration (2 days) saving us time and saving the database effort. Another reason the control performs very well is the fact that we only search when a user has typed 3 or more characters and we only return X number of results instead of every matching result. If the user needs to further filter the results they simply add on another letter (or number depending on their search).
Productive: The autocomplete control is especially efficient for data-entry. Unlike a listbox or dropdown the user does not have to use the mouse to make a selection. The user simply tabs into the textbox and begins typing. This is not to say that a drop-down and a listbox don't have their own benefits but it's important to use the right control for the right purpose. A listbox and a text box wouldn't be efficient because of the size of our dataset
Multiple Search Criteria: Above we covered some limitations of dropdowns and listboxes but the main drawback for our requirements was the lack of multiple search criteria. The autocomplete control gives us the ability to customize our searches anyway we see fit.
Please post comments and ideas.
Sample Solution and Source Code *Please note that FireFox was not supported with this solution.
Pete Orologas