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

本文链接：https://blog.csdn.net/Longmanfei/article/details/6289849

本文介绍了一种使用jQuery实现自动填充效果的方法。通过监听键盘输入事件，实时从数据库中获取匹配项并在页面上显示，支持上下键选择及ESC键关闭。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

首先我们先设置一下页面回显的数据的样式

#txt{ width:180px; } #completeDiv{ width:180px; border:1px solid red; 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 <mce:script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js" mce_src="shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js"></mce:script> <mce:script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/complete.js" mce_src="shunfengcheWeb/testaoutBaidu/js/complete.js"></mce:script> </head> <body> <div> <input type="text" id="txt"/> <div id="completeDiv"> </div> </div> </body>