Ajax java implements the Automatic completion Function

Baidu suggests that it is very convenient for us. Just like when we talk to people, you just nod your head and don't bother yourself, so that we can get along with each other for a long time.

We all know that Baidu suggests using ajax. If you want to make quick and stable, it is not easy to copy and transplant data. After searching for the Internet for a long time, many of them are asp or php, and jquery is also used. However, there are too few Descriptive documents, so it is better to write them by yourself if you spend time researching them. According to the information provided by a pdf document, it took a little half a day to finally implement it. I would like to share with you here.
The principle flow chart is as follows:
 
The flowchart is quite clear and there is nothing to say. The following post code.
Javascript code:
Copy codeThe Code is as follows:
Var xmlHttpRequest;
Var table;
Var tbody;
Var div;
Var input;
Var curIndex;
Var size;
Var r_userId;
Function createXMLHttpRequest (){
If (window. ActiveXObject ){
XmlHttpRequest = new ActiveXObject ("Microsoft. XMLHTTP ");
} Else if (window. XMLHttpRequest ){
XmlHttpRequest = new XMLHttpRequest ();
}
}
// Send the request
Function findNames (){
If (event. keyCode = 38 | event. keyCode = 40 ){
} Else {
If (input. value. length> 0 ){
CreateXMLHttpRequest ();
Var url = encodeURI ("/jforum.html? Module = posts & action = findDept & names = "+ input. value ));
XmlHttpRequest. open ("GET", url, true );
XmlHttpRequest. onreadystatechange = processMatchResponse;
XmlHttpRequest. send (null );
} Else {
ClearNames ();
}
}

}
Function processMatchResponse (){
If (xmlHttpRequest. readyState = 4 ){
If (xmlHttpRequest. status = 200 ){
// Alert (xmlHttpRequest. status );
// Var id = xmlHttpRequest. responseXML. getElementsByTagName ("id ");
Var dept = xmlHttpRequest. responseXML. getElementsByTagName ("dept ");
Var id = xmlHttpRequest. responseXML. getElementsByTagName ("id ");

SetNames (dept, id );

} Else {
Window. alert ("the page you requested has an exception! ");
}
}
}
Function setNames (depts, ids ){
ClearNames ();
Size = depts. length;
If (size> 0 ){
Div. style. visibility = "visible ";
Var row, col1, col2, span;

For (var I = 0; I <size; I ++ ){
Row = document. createElement ("tr ");
Col1 = document. createElement ("td ");
Col1.innerText = depts [I]. firstChild. data;
Col2 = document. createElement ("td ");
Col2.setAttribute ("align", "right ");
Col2.setAttribute ("id", "col2 ");
Col2.setAttribute ("width", "5% ");
Span = document. createElement ("span ");
Span. innerText = ids [I]. firstChild. data;
Span. style. display = "none ";
Col2.appendChild (span );


Row. appendChild (col1 );
Row. appendChild (col2 );
Row. onmouseout = function (){
This. className = 'mouseout ';
}
Row. onmouseover = function (){
ClearSelected ();
This. className = 'mouseover ';
CurIndex = this. rowIndex;
}
Row. onclick = function (){
Input. value = this. cells [0]. innerText;
R_userId.value = table. rows [curIndex]. cells [1]. innerText;
ClearNames ();
};
Tbody. appendChild (row );
}
Row = document. createElement ("tr ");
Col2 = document. createElement ("td ");
Col1 = document. createElement ("td ");
Col2.setAttribute ("align", "right ");
Link = document. createElement ("");
Link. href = "javascript: clearNames ();";
Link. innerHTML = "disabled ";
Col1.appendChild (link );
Row. appendChild (col1 );
Row. appendChild (col2 );
Tbody. appendChild (row );
}
}
Function setPosition (){
Input = document. getElementById ("names ");
R_userId = document. getElementById ("r_userId ");
Table = document. getElementById ("table ");
Div = document. getElementById ("div ");
Tbody = document. getElementById ("tbody ");

Div. style. width = input. offsetWidth-2;
Div. style. border = "gray 1px solid ";
Div. style. left = getLeft (input );
Div. style. top = getTop (input) + input. offsetHeight + 6;

CurIndex =-1;
Input. focus (); // div. style. left + "," + div. style. top
}
Function clearNames (){
Var ind = tbody. childNodes. length;
For (I = ind-1; I> = 0; I --){
Tbody. removeChild (tbody. childNodes [I]);
}
Div. style. visibility = "hidden ";
CurIndex =-1;
}
Function clearSelected (){
Var ind = tbody. childNodes. length;
For (var I = ind-1; I> = 0; I --){
Tbody. childNodes [I]. className = "mouseOut ";
}
}
Function keyDown (){
If (div. style. visibility = "visible "){
If (event. keyCode = 38 ){
If (curIndex> = 0 ){
Table. rows [curIndex]. className = 'mouseout ';
CurIndex = curIndex-1;
If (curIndex> = 0 ){
Table. rows [curIndex]. className = 'mouseover ';
Input. value = table. rows [curIndex]. cells [0]. innerText;
R_userId.value = table. rows [curIndex]. cells [1]. innerText;
}
}
}
If (event. keyCode = 40 ){
If (curIndex <size-1 ){
If (curIndex> = 0 ){
Table. rows [curIndex]. className = 'mouseout ';
}
CurIndex = curIndex + 1;
Table. rows [curIndex]. className = 'mouseover ';
Input. value = table. rows [curIndex]. cells [0]. innerText;
R_userId.value = table. rows [curIndex]. cells [1]. innerText;
} Else {
Table. rows [curIndex]. className = 'mouseout ';
CurIndex =-1;
}
}
}
}
// Obtain the ordinate of an element
Function getTop (e ){
Var offset = e. offsetTop;
If (e. offsetParent! = Null) offset + = getTop (e. offsetParent );
Return offset;
}
// Obtain the abscissa of an element
Function getLeft (e ){
Var offset = e. offsetLeft;
If (e. offsetParent! = Null) offset + = getLeft (e. offsetParent );
Return offset;
}

There are too many codes, which are a little messy. jquery is not used, but it can better show the author's skills. The following points are described:
1. setPosition () is used to initialize all the variables required by the global environment. Therefore, you must first call when loading the page, such as the onload method of the body or other methods.
2. findNames () is a method used to operate ajax. Anyone familiar with ajax can understand it. The most important thing in it is to recode the parameter encodeURI (), decoding is required in the background.
3. processMatchResponse () is a callback function used to process the data returned from the background. It is handed over to setNames () for processing.
4. display the prompt content in table mode in setNames. Here we will learn more about JS and node.
5. The getTop and getLeft methods obtain the absolute position of the text box, relative to the upper left corner of the browser.
The background java code is as follows:
Copy codeThe Code is as follows:
Public void findDept () throws IOException {
String partDeptName = this. request. getParameter ("names ");
PartDeptName = java.net. URLDecoder. decode (partDeptName, "UTF-8 ");
Map <String, String> userMap = DataAccessDriver. getInstance (). newUserDAO (). getDeptByPart ("%" + partDeptName + "% ");

This. response. setContentType ("text/xml; charset = UTF-8 ");
This. response. setHeader ("Cache-Control", "no-cache ");


ServletOutputStream pw = this. response. getOutputStream ();
OutputStreamWriter out = new OutputStreamWriter (pw, "UTF-8 ");

Out. write ("<res> ");
Iterator <Map. Entry <String, String> it = userMap. entrySet (). iterator ();
While (it. hasNext ()){
Map. Entry <String, String> entry = (Map. Entry <String, String>) it. next ();
Out. write ("<id>" + entry. getKey () + "</id> ");
Out. write ("<dept>" + entry. getValue () + "</dept> ");
}
Out. write ("</res> ");

Out. flush ();
Out. close ();

}

Key Points:
1. decode the parameters.
2. Perform fuzzy match as needed during query.
3. The returned data adopts the xml or json method.
4. The return method is used here.
Copy codeThe Code is as follows:
ServletOutputStream pw = this. response. getOutputStream ();
OutputStreamWriter out = new OutputStreamWriter (pw, "UTF-8 ");

Such a stream is restricted by the framework of the system. If you use a simple servlet, you can use PrintWriter out = response. getWriter (); of course, The out method is println (). You can also flexibly change it based on your own framework.