`
Longmanfei
  • 浏览: 48079 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

“轻”量级“选手”jquery（的强大动能之）仿百度自动填充

百度jQueryAjaxJavaScriptCSS 
阅读更多

我想自动填充效果大家都见怪不怪了吧，其实要想实现自动填充效果，只要将当前输入的数据取出然后实时去数据库进行模糊匹配（不区分大小写并且将字符转换成对象数据找）就可以实现了，那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显，我们也可以用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>

 

<!--EndFragment-->
分享到：
| “轻”量级“选手”JQuery(强大功能)
评论
2 楼 fixsmall 2011-04-04  
楼主这“轻量级”选手jQuery是什么意思？仿百度？百度还是仿Google的呢，

自动填充，你这个实现的只能是英文，对于中文输入法无效。因为输入法拦截了 key事件。

两个办法，一个使用 text表单的 oninput事件，FF, Opera, Webkit支持+onpropertychange IE支持。

$('#txt').bind('input propertychange', function(){
   // autocomplete code here
});

另一个，自己写一个插件循环探测文本内容是否改变。
1 楼 dj4kobe 2011-04-02  
刚刚也写了一个类似的东西。
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics