Professional Ajax, 2nd Edition

12.3. Creating a Site Search Widget

Search functionality is an integral part of any web site; it enables your viewers to find the data they desire quickly and easily. However, conventional search mechanisms suffer from the same problems as the rest of the Web: they require a page refresh and may lose data when the search is performed.

Within the past year, many Ajax solutions have cropped up, with one standing out from the rest: LiveSearch. LiveSearch (http://blog.bitflux.ch/wiki/LiveSearch), developed by the people at BitFlux (www.bitflux.ch), is a search-as-you-type solution that emulates the Apple Spotlight feature in OSX Tiger.

LiveSearch presents a new take on web site searches, but it also has its critics. For one thing, it offers a different approach to achieving the desired results. The average user is used to entering his or her search criteria and pressing a Search button. LiveSearch, on the other hand, uses the onkeypress DOM event and returns the results as you type. This method may be more efficient in terms of getting your results, but it is unexpected by the user, which can cause confusion.

This next widget is an Ajax solution for searching a site that uses a SQL database as a data store. It will feature a user interface that users are already accustomed to: a search box, a submit button, and a <div/> element that displays the search results (see Figure 12-8).

Figure 12.8. Figure 12-8

12.3.1. The Server-Side Component

You will use the .NET Framework and C# language ...