JQUERY仿百度谷歌智能提示

 若使用jquery智能提示，则主要使用Ajax动态调用后台。

仿百度谷歌智能提示，说实话，本篇博客仿的不太缜密，有待继续完善。

仿百度谷歌智能提示，思路主要如下：

1.后台根据前台传递的参数进行匹配，提供数据列表。

2.前台美观智能展示选择数据列表

声明：此篇博客的后台是假数据，没有搭建数据库进行匹配。

来一张目前功能截图：

鼠标控制：

键盘控制：

选中之后：

思路：【重点前台】

1. 监听输入框值变化，然后动态生成显示列表【仿】
2. 显示列表中绑定各种事件（鼠标移近、移除、单击【仿】
3. 文本框聚焦以及失焦状态【仿】
4. 文本框单击状态【仿】
5. 文本框对方向键的控制【仿】

详细的说明都在js注释中。

后台servlet代码：

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 {

	@Override
	protected void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
        response.setContentType("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.append("");
            results.append("");
            results.append("");
            results.append("");
            results.append("");
            results.append("");
            results.append("");
            results.append("");
            results.append("");
            out.print(results.toString());
        out.flush();
        out.close();
	}
}

模拟访问代码：

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 {

	@Override
	protected 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);
	}
}

前台QUERY代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>










自动搜索框：

至于web.xml配置servlet就不再赘述了，下载代码测试，欢迎拍砖。