"Ajax" Ajax implementation of the search information itself actively recommend and complete

long time no continue to see the Ajax video tutorial, today will be the last tutorial case finished. When we enter text in the Search engine text box will prompt corresponding information, this case is to achieve such basic functions, the code is more rough and need to be further intact, some places also need to ask the great God. Finished effect:

First, the pre-code preparation work:

1. Jqueryautocomplete.html is responsible for the display of the page side

A) For example the following:

Watermark/2/text/ahr0cdovl2jsb2cuy3nkbi5uzxqvtfphu180/font/5a6l5l2t/fontsize/400/fill/i0jbqkfcma==/dissolve/70 /gravity/center ">

b) Code such as the following:

<! DOCTYPE html> 
    

c) Note: The page-side HTML code is basically not changed in the subsequent writing.

2. Jqueryauto.js is responsible for making changes to page elements

3. wordxml.jsp stored information recommended XML data

a)       initial code such as the following (changes required later):

<!--this JSP returns the XML data, the ContentType value is Text/xml--><%@ Pagelanguage= "java" contenttype= "text/xml; Charset=utf-8 "pageencoding=" Utf-8 "%><!--return XML data, return all data, wait for the background to fully collaborate and then limit the return of the content--><words> <WORD&G t;absolute</word> <word>anyone</word> <word>anything</word> <word>apple<     ;/word> <word>abandon</word> <word>breach</word> <word>break</word> <word>boolean</word></words> 

4. Autocomplete.java background servlet

A) The initial code such as the following (for simplicity, the servlet does not infer the operation.) So there's basically no change in the back):

Import java.io.ioexception;importjavax.servlet.requestdispatcher;importjavax.servlet.servletexception; Importjavax.servlet.http.httpservlet;importjavax.servlet.http.httpservletrequest; importjavax.servlet.http.httpservletresponse;/** * @author Ginger * Full content Background code * Receive user requests */public class Autocompleteextends HttpServlet {     @Override     protected void doget (HttpServletRequest req, Httpservletresponseresp)                   throws Servletexception, IOException {            string word=req.getparameter ("word");//          Save the string in the Request object            Req.setattribute ("word", word);//          request forwarded to the view layer            requestdispatchertemp=req.getrequestdispatcher ("wordxml.jsp" );            Temp.forward (req, resp);     }      @Override     protected void DoPost (HttpServletRequest req,httpservletresponse resp)                   throws Servletexception, IOException {            doget (req, resp);}     }

Ii. Next we write the jqueryauto.js

1.   to set the style of the recommended text popup auto:

2.   Set Button's Click event:

3.   adding keyboard events to the input text box

A) keyboard events are processed when you press the letter key, the up and down keys, and the ENTER key:

I. Letter key: Submitting text box data to the background

II. Key: Set the effect of the recommended text is highlighted

III. Enter: Simulates the effect of a button being clicked

4. Finally the code

Represents the currently highlighted node Var highlightindex=-1;$ (document). Ready (function () {/////type var wordinput=$ ("#word") to set the pop-up box based on the input box;      var wordinputoffset=wordinput.offset (); Hide your own active complement div box $ ("#auto"). Hide (). CSS ("Border", "1pxblack solid"). CSS ("position", "absolute"). CSS ("Top",     Wordinput.height () +wordinputoffset.top+ "px"). CSS ("left", wordinputoffset.left+ "px"). Width (wordinput.width ()); Press and bounce the event $ ("#word") for the text box to join the keyboard. KeyUp (Event) {//Handling keyboard events in a text box//Assuming input letters, BACKSPACE, delete keys, send information to server V Ar myevent=event | |      window.event;      var Keycode=myevent.keycode; if (keycode>=65&&keycode<=90 | | keycode==8 | |      KEYCODE==46) {//1. First get the text box contents var wordtext=$ ("#word"). Val ();                    2. Send the content to the server (if the text is not empty) var autonode=$ ("#auto");                   if (wordtext!= "") {$.post ("AutoComplete", {word:wordtext},function (data) {//               2.1 Convert DOM object to jquery Object                   var jqueryobj=$ (data);             2.2 Find all Word nodes varwordnodes=jqueryobj.find ("word"); 2.3 Traverse all word nodes.                                  Remove the word content, add to the Auto pop-up box//Empty the Fill box data autonode.html ("") before each commit data;                                         $ (wordnodes). Each (function (i) {//Get Word content                                     var wordnode=$ (this);//Add a node to the popup box                                  Autonode.append ($ ("<div>"). HTML (Wordnode.text ()));                                  });                                  if (Wordnodes.length >0) {autonode.show ();                                  }else{autonode.hide ();   }}, "xml");                 }else{autonode.hide ();//Hide Popup same time reset highlight value                    Highlightindex=-1; }}else if (keycode==38 | | keycode==40) {//assuming input up and down button, the complement content will be selected if (keycode==38) {//To                    On//Find all child nodes of the current complement box varautonodes=$ ("#auto"). Children ("div"); if (highlightindex!=-1) {//Assume that the original highlighted node exists.                           The background is changed to white Autonodes.eq (highlightindex). CSS ("Background-color", "Whites"). CSS ("Color", "black");                    highlightindex--;                    }else{highlightindex=autonodes.length-1;                           } if (highlightindex==-1) {//If Index becomes-1 after changing indexed value, the index value points to the last element                    Highlightindex=autonodes.length-1; } autonodes.eq (Highlightindex). CSS ("Background-color", "Blue"). CSS ("Color", "white"); } if (keycode==40) {//down//Find all child nodes of the current complement box varautonodes=$ ("#                    Auto "). Children (" div "); if (highlightindex!=-1) {//Assume that the original highlighted node exists.                    The background is changed to white Autonodes.eq (highlightindex). CSS ("Background-color", "Whites"). CSS ("Color", "black");                    } highlightindex++;                           if (highlightindex==autonodes.length) {//If index is changed to 1 after changing the indexed value, the index value is pointed to the last element                    highlightindex=0;             } autonodes.eq (Highlightindex). CSS ("Background-color", "Blue"). CSS ("Color", "white");                    }}else if (keycode==13) {//assuming the input Enter//Fill box has the selection if (highlightindex!=-1) {      varautonodes=$ ("#auto"). Children ("div"); Assigns the highlighted text to the input box $ ("#word"). Val (Autonodes.eq (Highlightindex). Text ());                    Highlightindex=-1;                    $ ("#auto"). Hide (); Alert ("Committed.             "); The}else{//Fill box does not have the selection alert ("committed.                    ");             $ ("#auto"). Hide (); }});//Add Click event $ ("input[type= ' button") for button. Click (function () {alert ("committed.      "); })});

Third, finally in the background to filter the data

Finally wordxml.jsp code for

<!--This JSP returns the XML data, the value of ContentType is Text/xml--><%@ pagelanguage= "java" contenttype= "text/xml; Charset=utf-8 "pageencoding=" Utf-8 "%><!--return the XML data, return all data, wait for the background to fully collaborate and then limit the return of the content--><% String word= (strin g) Request.getattribute ("word");%><words> <% if ("absolute". StartsWith (Word)) {%> <word>absol      Ute</word> <%}%> <% if ("anyone". StartsWith (Word)) {%> <word>anyone</word>      <%}%> <% if ("Anything". StartsWith (Word)) {%> <word>anything</word> <%}%> <% if ("Apple". StartsWith (Word)) {%> <word>apple</word> <%}%> <% if ("abandon". StartsWith (Word)) {%> <word>abandon</word> <%}%> <% if ("breach". StartsWith (Word)) { %> <word>breach</word> <%}%> <% if ("Break". StartsWith (Word)) {%> &LT;WORD&G T;break</word> <%}%> <% if ("Boolean". StartsWith (Word)) {%> <word>boolean</word> <%}%></words> 

Author: The beginning of the matter

Sign: You just have to try.

It doesn't count as failure.

"Ajax" Ajax implementation of the search information itself actively recommend and complete