代码改变世界

Type-ahead (auto-complete) suggest 开发

2012-08-30 01:00  youxin  阅读(355)  评论(0编辑  收藏  举报

Since Ajax has become popular, the type-ahead suggest has been one of the most
sought-after pieces of code. Many people have created different versions of the
type-ahead suggest that handle the interaction with the server in many ways. A lot
of the solutions out there have flaws, while others go way overboard. We first evaluate
some of the functionality in many type-ahead suggest applications and then
take a quick look at Google Suggest. After that, we'll design our application。

Common type-ahead suggest features
Numerous type-ahead applications are available, from basic to advanced. Each of
them does the same basic thing; some have fancy interfaces with fading transition
effects. If you do a search for “type-ahead suggest Ajax,” you will find plenty of
examples.
If you look at a few of them, you should see that they all perform the same type
of actions:
1 You type a character.
2 The type-ahead makes a request to the server.
3 It returns data to the client.
4 The client takes that data and displays the results in the table, div, textbox,
or some other format.

However, there are things that some of the scripts do not handle well. Developers
need to take into consideration bandwidth, server capacity, and the client’s configuration.
If you forget about these factors, Ajax may hurt your user’s experience
instead of improving it.
The problems listed in table 10.1 are very common with Ajax applications

 

A good strategy for improving responsiveness is to cache the data on the client.
(We can also cache data on the server, but that’s another issue, more familiar to
developers of classic web apps.) A type-ahead suggest system will typically return
fewer results as extra characters are typed, and these will often be a subset of earlier
results. A simple implementation will discard previous requests and fetch all
data from the server every time. A more intelligent solution might retain the
results of the initial request and whittle away unwanted entries as the user types,

refreshing the user interface without going back to the server for every keystroke.
This improves the application by increasing responsiveness and reducing the
bandwidth. We’ll just be going through the result set that we have, making it
quicker to pull the necessary information and eliminating the extra postbacks to
the server.