“轻”量级“选手”jquery(的强大动能之)仿百度自动填充
我想自动填充效果大家都见怪不怪了吧,其实要想实现自动填充效果,只要将当前输入的数据取出然后实时去数据库进行模糊匹配(不区分大小写并且将字符转换成对象数据找)就可以实现了,那就要时间当我们按下键盘时去触发时间并得到返回的集合进行页面的回显,我们也可以用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-->
复制代码
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论