Ajax: Real-time prompt Function

Remember Google's search. When you enter "North", the search keyword starting with "North" will be immediately pulled out. For example:

Through Ajax technology, we can also easily implement this function. BelowSource codeThis is an example I demonstrated when I attended class y08. I will study it myself!

1. xmlservlet. Java: This is a servlet that is returned in XML format.
Package com. Aptech. servlet;
Import java. Io. ioexception;
Import java. Io. printwriter;
Import java. util. arraylist;
Import java. util. List;
Import javax. servlet. servletexception;
Import javax. servlet. http. httpservlet;
Import javax. servlet. http. httpservletrequest;
Import javax. servlet. http. httpservletresponse;
Public class xmlservlet extends httpservlet {
Private Static list List = new arraylist ();
static {
list. Add ("Peking University ");
list. Add ("Great Northern Wilderness ");
list. Add ("Northern Ireland ");
list. Add ("Nordic ");
list. Add (" ");
list. Add ("red ");
list. Add ("Sun, red ");
list. Add ("red, green, and female ");
list. Add ("Flower pen ");
list. Add ("new ");
}
Public void dopost (httpservletrequest request, httpservletresponse response)
throws servletexception, ioexception {
response. setcontenttype ("text/XML; character = UTF-8 ");
// disable caching
response. setheader ("Pragma", "No-Cache ");
response. setheader ("cache-control", "No-Cache ");
response. setdateheader ("expires", 0 );

Printwriter out = response. getwriter ();
Stringbuffer sb = new stringbuffer ();
SB. append (" ");
Request. setcharacterencoding ("UTF-8 ");
String key = request. getparameter ("key ");
If (key! = NULL & Key. Trim (). Length ()> 0 ){
For (string K: List ){
If (K. startswith (key )){
SB. append (" ");
SB. append (k );
SB. append (" ");
}
}
}
SB. append (" ");
Out. Print (sb. tostring ());
Out. Flush ();
Out. Close ();
}
}

Configuration:
Xmlservlet Com. Aptech. servlet. xmlservlet Xmlservlet /Xmlservlet

2.google.html: a static page that is used to enter query keywords and display matching information in real time.

Keywords keywords

Keywords keywords
Keywords:
Keywords keywords
Keywords keywords

3.styles.css: Use a style sheet for better results.
. Box {
Border: 1px solid # 0000ff;
Font-size: 14px;
Color: #000000;
Overflow: auto;
}
. Op {
Background-image: url(bk.jpg );
Border: 1px solid # 3300cc;
Width: 100%;
Color: white;
}

4. Results