[JQuery]仿百度自动填充

xin73678

浏览: 33965 次
性别:
来自: 江苏

最近访客更多访客>>

piaoyaohou

zm520msj

任正信

artaganan8

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

JavaScript

百度 jQuery Ajax JavaScript CSS

只要将当前输入的数据取出然后实时去数据库进行模糊匹配（不区分大小写并且将字符转换成对象数据找）就可以实现了，那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显，我们也可以用jquery或者用ajax写（在jquery中有对ajax的实现而且使用起来十分方便大家应该知道ajax局部刷新吧）;

下面我们就用jquery去实现自动填充数据：

	#txt{
	  width:180px;
	 }
	#completeDiv{
	  width:180px;
	  border:1px solid #C6C6C6;
	  display:none;
	 }
	ul{
	 list-style: none;
	 margin:0px;
	 padding:0px;
	 }
	li{
	 list-style: none;
	 margin:0px;
	 padding:2px;
	 font-size:12px;
	 }
	.over{
	  background:#83E7AF;
	  color:#ffffff;
	  cursor: default;
	 }
	然后我们在页面引入相应的css和js 包括相应的jquery的js
	$(document).ready(function(){
	 var indexLi = -1;
	 $('#txt').keyup(function(event){ 
	  if(event.keyCode==38){        //上e
	   indexLi --;
	   if (indexLi < 0) {
	    indexLi = 9;
	   }
	   var li = $('li').eq(indexLi);
	   li.addClass('over').siblings().removeClass('over');
	   $('#txt').val(li.text());
	  }else if(event.keyCode==40){   //下
		 
	   indexLi ++;
	   if (indexLi > 9) {
	    indexLi = 0;
	   }
	   var li = $('li').eq(indexLi);
	   li.addClass('over').siblings().removeClass('over');
	   $('#txt').val(li.text());
	  }else if(event.keyCode==27){  //ESC
	   $('#completeDiv').hide();
	  }else if(event.keyCode==13){   //回车 回车是跳到百度去了
	   window.location.href = "http://www.baidu.com/s?wd=" + $('#txt').val();
	  }else{
	   var t = $('#txt').val();   //文本框输入的值 
	  // alert("123123"); //键盘按下  通过getJSON里面的连接请求相应的.do然后把当前的输入框文本传过去进行模糊匹配，并且返回相应的集合数组
	   $.getJSON('/shunfengcheWeb/aoutSearch.do',{"txt":t},function(data){
	    if(data==null){
	     $('#completeDiv').hide();  //层隐藏 首先我们要设置隐藏
	     return ;
	    }
	    $('#completeDiv').empty();   //清空层内容 当重新遍历时清空原先的数据
	    var ul = $('<ul></ul>');
	    $.each(data,function(index,item){  //遍历数据 //开始遍历数组
	     var li = $('<li></li>')
	       .text(item)
	       .mouseover(function(){
	        $(this).addClass('over')
	            .siblings().removeClass('over');
	        indexLi = index;
	       }).click(function(){
	        $('#txt').val($(this).text());
	        $('#completeDiv').hide();
	       });
	     ul.append(li);//创见相应的ul和li并把查询的数据复制
	    });
	    $('#completeDiv').append(ul).show();  //显示层回显到页面
	   });
	  }
	 });
	});
	页面jsp
	 <script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js"></script>
	 <script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/complete.js"></script>
	 
	  </head>
	  <body>
	    <div>
	     <input type="text" id="txt"/>
	     <div id="completeDiv">
	     </div>
	    </div>
	   
	  </body>

分享到：