Use jquery to query data in real time (similar to Google's Quick query)

When I developed a library website, I found that there were tens of thousands of books and authors. If I used the drop-down menu to choose from, I would go crazy, therefore, jquery is used to query the drop-down menu that you want to match in real time based on the input letter or man.

JSP page:

<TD>

<! -If each character is entered, the desired match is queried in real time.->
<Input name = "authorkey" type = "text" id = "authorkey" size = "50" AutoComplete = "off" onmouseover = "This. Title = This. Value"/>
<Input type = "hidden" name = "authorid" id = "authorid" value = ""/>
<Span id = "authoridtip"> </span>

</TD>

 

Jquery code:

$ (). Ready (function (){

VaR Rand = math. Random (9999 );

// Query the author
$ ("# Authorkey"). AutoComplete ("serializeback! Quickqueryauthorinfobykey. Do ",{
Scroll: True,
Width: 300,
Extraparams :{
Num: Rand,
Cache: false
}
})
. Result (function (event, Data, formatted ){
VaR strarr = data [0]. Split ("#");
$ ("# Authorkey"). Val (strarr [0]);
$ ("# Authorid"). Val (strarr [1]);
$ ("# Authorid"). Blur ();
}). Change (function (){
$ ("# Authorid"). Val ("");
});

});

Java code in action:

Public void quickqueryauthorinfobykey () throws exception {
String key = request. getparameter ("Q"); // "Q" is determined by the autocomplete plug-in.
Response. setcharacterencoding ("UTF-8 ");
Printwriter out = response. getwriter ();
If (! Key. Equals ("")){
Response. setcontenttype ("text/html; charset = gb2312 ");

// Query the author that you want to match based on the input key
List <author> booklist = authormanager. getauthorsbyname (key );
If (booklist! = NULL & Booklist. Size ()> = 1 ){
Author book = NULL;
For (INT I = 0, Len = Booklist. Size (); I <Len; I ++ ){
Book = Booklist. Get (I );
Out. println (book. getname () + "#" + book. GETID ());
}
}
Out. Flush ();
Out. Close ();
}
}

 

In the end, do not forget to import jquery and several related packages, such as jquery. autocomplete. js and jquery. ajaxqueue. js.