首页 > 代码库 > JQUERY仿百度谷歌智能提示
JQUERY仿百度谷歌智能提示
若使用jquery智能提示,则主要使用Ajax动态调用后台。
仿百度谷歌智能提示,说实话,本篇博客仿的不太缜密,有待继续完善。
仿百度谷歌智能提示,思路主要如下:
1.后台根据前台传递的参数进行匹配,提供数据列表。
2.前台美观智能展示选择数据列表
声明:此篇博客的后台是假数据,没有搭建数据库进行匹配。
来一张目前功能截图:
鼠标控制:
键盘控制:
选中之后:
思路:【重点前台】
- 监听输入框值变化,然后动态生成显示列表【仿】
- 显示列表中绑定各种事件(鼠标移近、移除、单击【仿】
- 文本框聚焦以及失焦状态【仿】
- 文本框单击状态【仿】
- 文本框对方向键的控制【仿】
详细的说明都在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>"); results.append("<result key='a1' count='07' ></result>"); results.append("<result key='a2' count='11' ></result>"); results.append("<result key='a3' count='18' ></result>"); results.append("<result key='a4' count='19' ></result>"); results.append("<result key='a5' count='21' ></result>"); results.append("<result key='a6' count='31' ></result>"); results.append("<result key='a7' count='41' ></result>"); results.append("<result key='a8' count='51' ></result>"); results.append("</results>"); 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"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <style type="text/css"> #kw1 { width: 529px; height: 20px; padding: 11px 7px 7px; font: 16px arial; border: 1px solid #b8b8b8; outline: none } .btn { width: 105px; height: 40px; padding: 0; padding-top: 2px; border: 0; background-position: -464px -42px; background-color: #e6e6e6; cursor: pointer; font-size: 16px } .showresult{ border: 1px solid #b8b8b8; padding: 11px 7px 7px; width: 529px; margin-left:100px; display:none; font: 16px arial; } .showresultnew{ border: 1px solid #b8b8b8; padding: 11px 7px 7px; width: 529px; margin-left:99.9px; display:block; font: 16px arial; } input::-ms-clear{display:none;} </style> <script type="text/javascript" src=http://www.mamicode.com/"JS/jquery-1.4.2.min.js"></script>>至于web.xml配置servlet就不再赘述了,下载代码测试,欢迎拍砖。
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。