首页 > 代码库 > JQUERY仿百度谷歌智能提示

JQUERY仿百度谷歌智能提示

2024-07-10 11:45:52   228人阅读

  若使用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>");
            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就不再赘述了，下载代码测试，欢迎拍砖。


联系
我们