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

发布于 2022-09-30 12:08:45 字数 7404 浏览 12 评论 0

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

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

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

  1.         #txt{
  2.           width:180px;
  3.          }
  4.         #completeDiv{
  5.           width:180px;
  6.           border:1px solid #C6C6C6;
  7.           display:none;
  8.          }
  9.         ul{
  10.          list-style: none;
  11.          margin:0px;
  12.          padding:0px;
  13.          }
  14.         li{
  15.          list-style: none;
  16.          margin:0px;
  17.          padding:2px;
  18.          font-size:12px;
  19.          }
  20.         .over{
  21.           background:#83E7AF;
  22.           color:#ffffff;
  23.           cursor: default;
  24.          }
  25.         然后我们在页面引入相应的css和js 包括相应的jquery的js
  26.         $(document).ready(function(){
  27.          var indexLi = -1;
  28.          $('#txt').keyup(function(event){
  29.           if(event.keyCode==38){        //上e
  30.            indexLi --;
  31.            if (indexLi < 0) {
  32.             indexLi = 9;
  33.            }
  34.            var li = $('li').eq(indexLi);
  35.            li.addClass('over').siblings().removeClass('over');
  36.            $('#txt').val(li.text());
  37.           }else if(event.keyCode==40){   //下
  38.                  
  39.            indexLi ++;
  40.            if (indexLi > 9) {
  41.             indexLi = 0;
  42.            }
  43.            var li = $('li').eq(indexLi);
  44.            li.addClass('over').siblings().removeClass('over');
  45.            $('#txt').val(li.text());
  46.           }else if(event.keyCode==27){  //ESC
  47.            $('#completeDiv').hide();
  48.           }else if(event.keyCode==13){   //回车 回车是跳到百度去了
  49.            window.location.href = "http://www.baidu.com/s?wd=" + $('#txt').val();
  50.           }else{
  51.            var t = $('#txt').val();   //文本框输入的值
  52.           // alert("123123"); //键盘按下  通过getJSON里面的连接请求相应的.do然后把当前的输入框文本传过去进行模糊匹配,并且返回相应的集合数组
  53.            $.getJSON('/shunfengcheWeb/aoutSearch.do',{"txt":t},function(data){
  54.             if(data==null){
  55.              $('#completeDiv').hide();  //层隐藏 首先我们要设置隐藏
  56.              return ;
  57.             }
  58.             $('#completeDiv').empty();   //清空层内容 当重新遍历时清空原先的数据
  59.             var ul = $('<ul></ul>');
  60.             $.each(data,function(index,item){  //遍历数据 //开始遍历数组
  61.              var li = $('<li></li>')
  62.                .text(item)
  63.                .mouseover(function(){
  64.                 $(this).addClass('over')
  65.                     .siblings().removeClass('over');
  66.                 indexLi = index;
  67.                }).click(function(){
  68.                 $('#txt').val($(this).text());
  69.                 $('#completeDiv').hide();
  70.                });
  71.              ul.append(li);//创见相应的ul和li并把查询的数据复制
  72.             });
  73.             $('#completeDiv').append(ul).show();  //显示层回显到页面
  74.            });
  75.           }
  76.          });
  77.         });
  78.         页面jsp
  79.          <script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/jquery-1.4.4.min.js"></script>
  80.          <script type="text/javascript" src="/shunfengcheWeb/testaoutBaidu/js/complete.js"></script>
  81.          
  82.           </head>
  83.           <body>
  84.             <div>
  85.              <input type="text" id="txt"/>
  86.              <div id="completeDiv">
  87.              </div>
  88.             </div>
  89.           
  90.           </body>
  91. <!--EndFragment-->

复制代码

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文