JQUERY仿百度谷歌智能提示

标签： jquery 百度 谷歌 | 发表时间：2014-07-02 04:16 | 作者：llhhyy1989
出处：http://blog.csdn.net

  若使用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="JS/jquery-1.4.2.min.js"></script>
</head>
<script type="text/javascript">
var line = 0;
var oldvalue=$("#kw1").val();//保留最初的输入值
$(function(){
	    // 38 上  40下 13 回车
	  $("#kw1").keydown(function(){
		  if(event.keyCode==13){
			  //若选择的结果与最初输入的结果一致则
			  //模糊匹配框收起来，是通过css样式显示隐藏控制，并且把显示结果的div清空，每次都再重新创建
			  hideresult();
			  clearresult();
			  if($("#kw1").val()==""){
				  alert("warning,the key can't be empty");
				  return;
			  }
			  //随意的查询url，模拟百度或谷歌搜索具体的东西
			  $.get("access",{key:$("#kw1").val()},function(responseinfo){
				  $("#responseinfo").html(responseinfo);
			  });
		  }else if(event.keyCode == 40){  //方向键下移
              $("table tbody tr").eq(line)
                  .css("backgroundColor", "gray") 
                  .css("color", "white");  //这是选中状态、白字蓝底
              $("table tbody tr").eq(line < 0 ? 0 : line - 1)
                  .css("backgroundColor", "white")
                  .css("color", "black");  //非选中状态、 黑字白底
              if(line==$("table tbody tr").length){
            	  $("#kw1").val(oldvalue);
            	  line=0;
            	  return;                //若下移键移动到最后一个，那么搜索框中的值恢复成原来的输入值，类似百度谷歌
            	                         //若下移键移动到最后一个，那么把下次line值从头再来，即line=0
            	                         //注意必须有个return，否则程序继续前进，显示结果有误
              }else{
            	  line=line+1;          //若下移键没有移动到最后一个，那么记录下一个line值
              }
              $("#kw1").val($("table tbody tr").eq(line-1).find("td").eq(0).html());//搜索框中值跟着下移键选择而变化，类似百度谷歌
          }else if(event.keyCode==38){  //方向键上移
        	  if(line==0){                       //若上移到第一个，那么搜索框中的值恢复到原来的输入值，类似百度谷歌
                  $("table tbody tr").eq(line)
                  .css("backgroundColor", "white")  //其实就是把已经选中的记录恢复成非选中状态，否则变成搜索框值=原来值，但是第一条依然处于选中状态
                  .css("color", "black");
            	  $("#kw1").val(oldvalue);
            	  line=$("table tbody tr").length;  //若上移到第一个，那么把下移line值变成table最后一个tr，即line=table tr .length
            	  return;
        	  }else{
        		  line=line-1;
        	  }
              $("table tbody tr").eq(line)
                  .css("backgroundColor", "gray")
                  .css("color", "white");           //选中状态
              $("table tbody tr").eq(line > $("table tbody tr").length ? 0 : line + 1)
                  .css("backgroundColor", "white")
                  .css("color", "black");          //非选中状态

              $("#kw1").val($("table tbody tr").eq(line).find("td").eq(0).html());//搜索框中值跟着下移键选择而变化，类似百度谷歌
          }
	  });
	  //确定搜索、button事件
	  $("#su1").click(function(){
		  if($("#kw1").val()==""){
			  alert("warning,the key can't be empty");
			  return;
		  }
		  $.get("access",{key:$("#kw1").val()},function(responseinfo){
			  $("#responseinfo").html(responseinfo);
		  });
	  });
	  //不断监听文本框事件，注意：必须写input，否则ie11不执行，以为propertychange不兼容导致的
	  $("#kw1").bind("input propertychange", function(){
		  oldvalue=$("#kw1").val();
		  clearresult();
		  if($("#kw1").val()==""){
			  //模糊匹配框收起来
			  hideresult();
		  }else{
			  showresult();//显示框
			  //动态生成table
			  dymictable();
	  }
	  });
	  //文本框失去焦点
	  $("#kw1").blur(function(){
		  //模糊匹配框收起来
          hideresult();
		  clearresult();
	  });
	  //文本框focus事件
	 $("#kw1").focus(function(){
		  clearresult();
		  //若文本框没有内容，则模糊匹配框收起来，否则显示模糊匹配结果
		  if($("#kw1").val()==""){
			  //模糊匹配框收起来
			  hideresult();
		  }else{
			  //显示模糊匹配框
			  showresult();
			  //动态生成table
			  dymictable();
			  }
	  });
	  //文本框点击事件，类似百度、谷歌
	  $("#kw1").click(function(){
		  clearresult();
		  //若文本框没有内容，则模糊匹配框收起来，否则显示模糊匹配结果
		  if($("#kw1").val()==""){
			  //模糊匹配框收起来
			  hideresult();
		  }else{
			  //显示模糊匹配框
			  showresult();
			  //动态生成table
		      dymictable();
			  }
	  });
	  
});
/**
 * 清空div中显示后台结果的table，程序中每次都是重新创建生成的
 */
function clearresult(){
	$("#showresult").html("");
	line=0; //主要是用来控制方向键选择记录的
}
/**
 * 通过css来隐藏查询的结果，并且程序中每次都是重新创建生成查询结果的
 */
function hideresult(){
	 $("#showresult").removeClass("showresultnew");
	 $("#showresult").addClass("showresult");
}
/**
 * 通过css来显示查询的结果，并且程序中每次都是重新创建生成查询结果的
 */
function showresult(){
	  $("#showresult").removeClass("showresult");
	  $("#showresult").addClass("showresultnew");
	  clearinfo();//清空界面返回提示信息
}
/**
 * 动态生成table,显示结果
 */
function dymictable(){
	  var d_table=$("<table id='testtable' width='100%'</table>")//动态显示结果
	  .attr("cellspacing","0");
	  $.get("testinstant.do",{key:$("#kw1").val()},function(xml){
	        $(xml).find("results result").each(function(){
	        	var d_key=$(this).attr("key");
	        	var d_count=$(this).attr("count");
	        	var d_tr=$("<tr></tr>").css("cursor","pointer").mouseover(function(){
	        		$(this).css("backgroundColor", "gray").css("color", "white");
	        	}).mouseout(function(){
	        		$(this).css("backgroundColor", "white").css("color", "black");
	        	}).mousedown(function(){ //鼠标选中，则银行显示框以及直接搜索，类似百度谷歌
	        		$("#kw1").val(d_key);
	        		//收缩
	                hideresult();
	                clearresult();
	                //直接搜索，类似百度谷歌
	  			    $.get("access",{key:$("#kw1").val()},function(responseinfo){
					  $("#responseinfo").html(responseinfo);
				  });
	        	});
	        	var d_td_key=$("<td></td>")
	        	.attr("width","20%")
	        	.attr("style","text-align:left")
	        	.html(d_key);
	        	var d_td_count=$("<td></td>")
	        	.attr("width","80%")
	        	.attr("style","text-align:right")
	        	.html("查询出个数："+d_count+"记录");
	            d_tr.append(d_td_key);
	            d_tr.append(d_td_count);
	            d_table.append(d_tr);
	            $("#showresult").append(d_table);
	        });
  });
}
/**
 * clear response info
 */
function clearinfo(){
	$("#responseinfo").html("");
}
</script>
<body>
自动搜索框：
<input name="wd" id="kw1"  type="text" maxlength="100"  >
<input class="btn" id="su1" type="button" value="搜搜" ><span id="responseinfo"></span>
<div id="showresult" class="showresult">
</div>
</body>
</html>
  至于web.xml配置servlet就不再赘述了，下载代码测试，欢迎拍砖。



作者：llhhyy1989 发表于2014-7-1 20:16:09 原文链接
阅读：0 评论：0 查看评论

相关 [jquery 百度 谷歌] 推荐：

JQUERY仿百度谷歌智能提示

- - CSDN博客推荐文章
  若使用jquery智能提示，则主要使用Ajax动态调用后台.   仿百度谷歌智能提示，说实话，本篇博客仿的不太缜密，有待继续完善.   仿百度谷歌智能提示，思路主要如下：.   1.后台根据前台传递的参数进行匹配，提供数据列表.   2.前台美观智能展示选择数据列表.   声明：此篇博客的后台是假数据，没有搭建数据库进行匹配.

百度文库与谷歌苹果的对比

- jessie - 月光博客
　　三天前，百度发布声明，就“伤害了一些作家的感情表示抱歉”，并保证在三天内处理百度文库中未授权的文学作品. 今天，百度对外宣布称，百度文库的清理工作已完成，百度称文库中非授权文学类作品基本清空. 　　截至到去年年底，百度文库的文学作品类文档共有200万份，经过我实际查看，现在百度文库里的文学作品类只剩余205份文档，大部分是两天内上传的.

百度和谷歌：局域网战胜互联网

- rainboat - 月光博客
　　5年前，也就是2006年04月，百度李彦宏曾经预言，“5年以后，Google和百度之间的关系是百度一枝独秀，从市场份额来说，大家很难看到Google了. 　　5年后的今天，CNZZ统计，Google搜索引擎在中国的使用率和占有率已经低至10%，而百度则高达76%，李彦宏的预言从某种角度上被验证了.

JQuery 选择器

- - CSDN博客Web前端推荐文章
}

点击我

.    像上面这样把JavaSript代码和HTML代码混杂在一起的做法同样也非常不妥，因为它并没有将网页内容和行为分离，所以才有JQuery选择器的学习.

点击我

. //给class为demo的元素添加行为.

jquery操作xml

- - CSDN博客Web前端推荐文章
jquery真的很强大，虽然一直在用jquery，不用一直都没有深入，这几天重新学习了一下，不得不感叹她的强大，已经让我深深入迷. 这里记录一下，她是怎么快速地操作xml的.. 这里我们有一个xml文件：. jquery如何操作呢,总的思想，就是和操作dom差不多的方法. 首先我们获取这个文件的内容：（我先引入jquery库哈）.

jQuery JSONP跨域

- - Web前端 - ITeye博客
基于Jquery的Ajax跨域访问. 单点登录服务器(sso服务器). 登录网页项目的时候，由于使用了单点登录，所以页面会跳转到sso服务器，进行统一登录，. 现在需要在该界面增加令牌的认证，但是SSO服务器和令牌服务器部署在不同的服务器，且暂时没有要合并的可能，所以在SSO登录的时候必须要对令牌进行验证，就必须涉及到了跨域访问的问题.

jquery 插件

- - JavaScript - Web前端 - ITeye博客
 jQuery插件的开发包括两种：. 一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法. jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法. 下面就两种函数的开发做详细的说明. 1 、类级别的插件开发.

让jquery更快

- - JavaScript - Web前端 - ITeye博客
很久没有关注jQuery了，最近重新看了一下，看到一些不错的文章，转来坐一下笔记. 其内容和一些新提供的方法还是很多有值得学习的地方. 使用最新版本的jQuery. jQuery的版本更新很快，你应该总是使用最新的版本. 因为新版本会改进性能，还有很多新功能. 下面就来看看，不同版本的jQuery性能差异有多大.

百度搜索引擎市场份额达77.7% 谷歌中国降1%

- 品味视界 - cnBeta.COM
艾瑞咨询分析师陈泓宇今日发布分析报告，报告显示第三季度百度在中国搜索引擎市场中的份额达77.7%. 谷歌中国的市场份额则在逐渐减少，较上一季度下降1.0%. 数据显示，2011年第三季度中国搜索引擎市场规模达到55.1亿元，环比上升24.7%，同比上升77.8%，同比增速较上一季度增长13.3个百分点，继续维持快速上升趋势.

美媒:百度推视觉搜索引擎 欲与谷歌一较高下

- - cnBeta全文版
据美国《连线》杂志6月12日报道，百度上周揭晓其视觉搜索功能，预计成为中国首家视觉搜索引擎，用户凭借图片就能进行搜索. 尽管谷歌早已提供视觉搜索服务，但百度大幅提高了在线搜索速度，显示出追赶谷歌的决心. 据悉，百度视觉搜索基于一种被称为卷积神经网络的深度识别技术，与谷歌照片标签系统采用的技术相同. 深度识别技术致力于模仿人脑运作，百度深度识别研究所已经研发出针对光学特点、人脸以及声音的深度识别算法，以用于在线广告和网站搜索.