jquery imitation baidu Google Smart tips

 If you use jquery smart hints, use Ajax to dynamically invoke the background. Imitation Baidu Google Smart tips, to tell the truth, this blog is not too careful, to continue to improve.  Imitation Baidu Google Smart tips, the main ideas are as follows: 1. The background is matched by the parameters passed by the foreground to provide a list of data.    2. Smart Display at the front desk select a data list declaration: The background of this blog is false data, no database to match. To a current function: Mouse control: Keyboard control: After selection: thinking: "Key front desk"

1. Listen for input box value changes, then dynamically generate the display list "faux"
2. Bind various events in the display list (mouse over, remove, click Faux
3. text box focus and defocus State "faux"
4. text box click the status "faux"
5. text box control of the arrow keys "imitation"

Detailed instructions are in the JS comment.background servlet code:

Package Com.servlet;import Java.io.ioexception;import Java.io.printwriter;import javax.servlet.ServletException; Import Javax.servlet.http.httpservlet;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;public class Searchservlet extends HttpServlet {@Overrideprotected void doget ( HttpServletRequest request, HttpServletResponse response) throws Servletexception, IOException {response.setcontent        Type ("Text/xml;charset=utf-8");        Request.setcharacterencoding ("Utf-8");        PrintWriter out = Response.getwriter ();        String key = Request.getparameter ("key");            System.out.println (key+ "----------->");            StringBuilder results = new StringBuilder ();            Results.append ("<results>");            Results.append ("<result key= ' A1 ' count= ' ></result>");            Results.append ("<result key= ' A2 ' count= ' ></result>"); Results.append ("<result key= ' A3 ' count= ' ></resu 'Lt> ");            Results.append ("<result key= ' A4 ' count= ' ></result>");            Results.append ("<result key= ' A5 ' count= ' ></result>");            Results.append ("<result key= ' A6 ' count= ' ></result>");            Results.append ("<result key= ' A7 ' count= ' ></result>");            Results.append ("<result key= ' A8 ' count= ' Wuyi ' ></result>");            Results.append ("</results>");        Out.print (Results.tostring ());        Out.flush (); Out.close ();}}

Analog access code:

Package Com.servlet;import Java.io.ioexception;import Java.io.printwriter;import javax.servlet.ServletException; Import Javax.servlet.http.httpservlet;import Javax.servlet.http.httpservletrequest;import Javax.servlet.http.httpservletresponse;public class Accessservlet extends HttpServlet {@Overrideprotected void doget ( HttpServletRequest request, HttpServletResponse response) throws Servletexception, IOException {String jspkey= Request.getparameter ("key"); System.out.println ("JSP.. Param. Key ... "+jspkey); PrintWriter Ps=response.getwriter (); Ps.println ("Successful,you put the key is" +jspkey);}}

Front desk Query code:

<%@ page language= "java" contenttype= "text/html; Charset=utf-8 "pageencoding=" UTF-8 "%><! DOCTYPE HTML PUBLIC "-//w3c//dtd HTML 4.01 transitional//en" "Http://www.w3.org/TR/html4/loose.dtd" >as for the web. config servlet, do not repeat, download the code test, welcome to shoot bricks.