Ajax-like Google auto-completion

This is a servlet application ..

In this example, the auto-complementing function of the imitation Google is implemented by using the <div> and <SELECT> methods respectively.

First, it is implemented through <div> .. Autocompleteusediv. jsp

Idea: Create a div layer to store the text of each prompt.

Value: currently, you can only click the mouse to select a value.

Disadvantages: Although both Firefox and IE are supported, the features are not user-friendly and the user experience is not high.

<% @ Page Language = "Java" pageencoding = "UTF-8" %> <br/> <style> <br/> # auto {<br/> position: absolute; <br/> display: none; <br/> background-color: # ffffc0; <br/> border: solid 1px #808080; <br/> font-size: 12px; <br/> color: green; <br/> cursor: pointer; <br/> padding: 3px; <br/>}< br/> </style> <br/> <SCRIPT type = "text/JavaScript"> <br/> var XMLHTTP = new XMLHttpRequest (); // supports Internet Explorer-8.0.6001.18702 </P> <p> function getgooglelist (txt) {<br/> If ("" = txt) {<br/> return; <br/>}< br/> XMLHTTP. open ('get', encodeuri ('$ {pagecontext. request. contextpath}/servlet/googlelistservlet? TXT = '+ txt), true); <br/> XMLHTTP. onreadystatechange = callback; // $ {pagecontext. request. contextpath} is an El expression, which is equivalent to <% = request. getcontextpath () %> <br/> XMLHTTP. send (null); <br/>}</P> <p> function callback () {<br/> If (4 = XMLHTTP. readystate & 200 = XMLHTTP. status) {<br/> var TXT = document. getelementbyid ('txt '); <br/> var auto = document. getelementbyid ('auto'); </P> <p> var S = XMLHTTP. responsetext; <br/> If ("" = s) {<Br/> auto. style. display = 'none'; // hide the layer <br/> return; <br/>}< br/> auto. innerhtml = ''; // clear the content of the auto layer </P> <p> var Ss = S. split (","); // splits the string returned by the server to obtain the SS array </P> <p> // (ss. length-1) is used to solve the problem of the last comma in the string returned by the server <br/> for (VAR I = 0; I <(ss. length-1); I ++) {<br/> // create a layer. That is, each line of the pop-up text occupies a div layer, that is, the child layer <br/> var DIV = document. createelement ('div '); <br/> // tested, it is valid in both firefox3.6.13 and IE8 .. Or use Div. innertext = ss [I]; but it is invalid in Firefox <br/> Div. appendchild (document. createtextnode (ss [I]); <br/> // place the new child layer to the parent layer. Put it in the DIV layer of ID = "Auto" <br/> auto. appendchild (DIV); <br/> // functions for processing three events on this layer. One is to move the cursor over the layer, and the other is to move the cursor out of this layer, one is to click the tab value <br/> Div. onmouseover = function () {<br/> This. style. backgroundcolor = 'red'; // set the background color to red when you place the cursor over it. <br/>}; <br/> Div. onmouseout = function () {<br/> This. style. backgroundcolor = '# ffffc0'; // the background color is restored after the mouse is removed. <br/>}; <br/> Div. onclick = function () {// function used to process the onclick event. Click the value <br/> TXT. value = This. innerhtml; // Alternatively, use TXT. value = ss [I]; or <br/> This. parentnode. style. Display = 'none'; // hide the parent layer. Hide the DIV layer of ID = "Auto" <br/> }; <br/>}< br/> // set the display position of the layer with ID = "Auto" <br/> var left = TXT. offsetleft; // obtain the distance between the text box id = "TXT" and the left side of the browser <br/> var Top = TXT. offsettop; // obtain the distance between the text box of ID = "TXT" and the top of the browser <br/> auto. style. left = left; // specify the distance between the layer of ID = "Auto" and the left of the browser. Alignment to the left of the text box <br/> auto. style. top = Top + TXT. offsetheight; // TXT. offsetheight: the height of the text box <br/> auto. style. width = TXT. offsetwidth; // make id = "Auto" the width of the DIV layer, consistent with the width of the text box <br/> auto. style. display = 'block '; // make the auto layer display <br/>}< br/> </SCRIPT> </P> <p> I want to search: <input type = "text" id = "TXT" onkeyup = "getgooglelist (this. value) "/> <br/> <Div id =" Auto "> </div>

The following is implemented through <SELECT> .. Autocompleteuseselect. jsp

Idea: Create a select drop-down list box in a parent Div layer and specify the length

The result is that the upper and lower keys can be used to select the text to be completed.

Value Options: Enter the Enter key and click the mouse to select a value.

Disadvantage: Because window. event is invalid in Firefox, it does not support Firefox. For more information, see the code comments of the following 25th lines.

<% @ Page Language = "Java" pageencoding = "UTF-8" %> </P> <p> <style> <br/> # auto {<br/> position: absolute; <br/> display: none; <br/>}< br/># se {<br/> color: green; <br/> border-width: 1px; <br/> border-style: solid; <br/> background-color: # ffffc0; <br/>}< br/> </style> </P> <p> <SCRIPT type = "text/JavaScript"> <br/> var XMLHTTP = new XMLHttpRequest (); // supports Internet Explorer-8.0.6001.18702 </P> <p> function getgooglelis T (txt) {<br/> If ("" = txt) {<br/> return; <br/>}< br/> var auto = document. getelementbyid ('auto'); </P> <p> // window. event. keycode can be used to set or obtain the ASCII code associated with the key that causes the event <br/> // but it is only valid for IE because the window object of Firefox does not have the event attribute, so window. event is invalid in Firefox <br/> //, the solution in Firefox is: On the first parameter of the event handle function, get event objects <br/> // For details, see my blog http://blog.csdn.net/jadyer/archive/2011/01/27/6167244.aspx <br/> If (40 = event. keycode & 'block' = auto. styl E. display) {// 40 indicates the downward key <br/> var selectvalues = document. getelementbyid ('se'); // obtain the tab <br/> selectvalues. focus (); // get the focus of the tab <br/> selectvalues. selectedindex = 0; // select the first element in the tab <br/> document. getelementbyid ('txt '). value = selectvalues. value; // set the value displayed in the text box to the first element value of the tab <br/> return; <br/>}< br/> auto. style. display = 'none'; // hide the <Div id = "Auto"> layer <br/> XMLHTTP. open ('get', encodeuri ('$ {pagecontext. request. cont Extpath}/servlet/googlelistservlet? TXT = '+ txt), true); <br/> XMLHTTP. onreadystatechange = callback; <br/> XMLHTTP. send (null); <br/>}</P> <p> function callback () {<br/> If (4 = XMLHTTP. readystate & 200 = XMLHTTP. status) {<br/> var TXT = document. getelementbyid ('txt '); // obtain the text box <br/> var auto = document. getelementbyid ('auto'); // obtain the tab layer <br/> var selectvalues = document. getelementbyid ('se'); // obtain the tab </P> <p> selectvalues. length = 0; // Delete the <option> tab. Or use selectvalues. options. length = 0; </P> <p> var S = XMLHTTP. responsetext; <br/> If ("" = s) {<br/> auto. style. display = 'none'; <br/> return; <br/>}</P> <p> var Ss = S. split (","); <br/> // specify the length of <SELECT>, that is, the length of the returned string. Note that the end of the returned string also contains a comma, so you need to subtract one <br/> selectvalues. size = ss. length-1; <br/> for (VAR I = 0; I <(ss. length-1); I ++) {<br/> selectvalues. options [I] = New Option (ss [I], ss [I]); <br/>}</P> <p> // specifies the <SELECT> event processing function. This function allows you to select a value by pressing the Enter key and clicking the mouse. <br/> selectvalues. onkeyup = function () {<br/> TXT. value = This. value; // here this refers to the <SELECT> drop-down list box, rather than a <option> tab <br/> If (13 = event. keycode) {// 13 indicates the Enter key <br/> This. parentnode. style. display = 'none'; // hide the <option> tab <br/>}< br/>}; <br/> selectvalues. onclick = function () {// select a value by clicking the mouse <br/> TXT. value = This. value; <br/> This. parentnode. style. display = 'none'; // hide the <option> tab <br/> }; <br/> // set the <Div id = "Auto"> layer position <br/> var left = TXT. offsetleft; <br/> var Top = TXT. offsettop; <br/> auto. style. left = left; <br/> auto. style. top = Top + TXT. offsetheight; <br/> auto. style. width = TXT. offsetwidth; <br/> auto. style. display = 'block'; <br/>}< br/> </SCRIPT> </P> <p> I want to search: <input type = "text" id = "TXT" onkeyup = "getgooglelist (this. value) "/> <br/> <Div id =" Auto "> <br/> <select id =" se "> </SELECT> <br/> </div>

Then the web. xml file

<? XML version = "1.0" encoding = "UTF-8"?> <Br/> <web-app version = "2.5" xmlns = "http://java.sun.com/xml/ns/javaee" <br/> xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance" <br/> xsi: schemalocation = "http://java.sun.com/xml/ns/javaee <br/> http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"> <br/> <servlet-Name> googlelistservlet </servlet-Name> <br/> <Servlet -Class> COM. jadyer. ajax. googlelistservlet </servlet-class> <br/> </servlet> <br/> <servlet-mapping> <br/> <servlet-Name> googlelistservlet </servlet-Name> <br/> <URL-pattern>/servlet/googlelistservlet </url-pattern> <br/> </servlet-mapping> <br/> </Web-app>

Finally, googlelistservlet. Java is used to process Ajax request operations.

Package COM. jadyer. ajax; </P> <p> Import Java. io. ioexception; <br/> Import Java. io. printwriter; <br/> Import Java. util. list; <br/> Import Java. util. vector; </P> <p> Import javax. servlet. servletexception; <br/> Import javax. servlet. HTTP. httpservlet; <br/> Import javax. servlet. HTTP. httpservletrequest; <br/> Import javax. servlet. HTTP. httpservletresponse; </P> <p> @ suppresswarnings ("serial ") <br/> public class googlelistservlet extends httpservlet {<br/> List <string> Users = new vector <string> (); </P> <p> @ override <br/> Public void Init () throws servletexception {<br/> users. add ("I love learning"); <br/> users. add ("I like Java"); <br/> users. add ("I also like money"); <br/> users. add ("I want to find a girlfriend"); <br/> users. add ("God of God"); <br/> users. add ("the most powerful"); <br/> users. add ("immortal"); <br/> users. add ("magical hearts"); <br/>}</P> <p> @ override <br/> Public void doget (httpservletrequest request, httpservletresponse response) throws servletexception, ioexception {<br/> request. setcharacterencoding ("UTF-8"); <br/> string TXT = request. getparameter ("TXT"); <br/> response. setcontenttype ("text/html; charsets = UTF-8"); <br/> printwriter out = response. getwriter (); <br/> for (string User: Users) {<br/> If (user. startswith (txt) {<br/> // at this time, the returned result is similar to [I love learning, I like Java, and I like money,] string <br/> // note that it also contains a comma at the end. Therefore, when processing the front-end page, the result is I <(ss. length-1) <br/> out. print (User + ","); <br/>}< br/> out. close (); <br/>}< br/>}