jquery 输入框动态提示用户输入的模糊匹配

最新推荐文章于 2023-04-12 10:52:49 发布

chunxukuang9920

最新推荐文章于 2023-04-12 10:52:49 发布

阅读量288

点赞数

文章标签： javascript 测试 json ViewUI

原文链接：https://my.oschina.net/u/3483147/blog/1581919

版权

html 代码

<div class="formControls col-xs-8 col-sm-8">
   <input type="text" class="input-text" value="" placeholder="" autocomplete="off" id="involveworks" name="director"/>
   <ul id="tip" style="margin: 0;padding: 4px; border: 1px solid #ddd" ></ul>
</div>

jquery代码

$(function () {
       $("#tip").hide();
       var delay = (function () {
           var timer = 0;
           return function (callback, time) {
               clearTimeout(timer);
               timer = setTimeout(callback, time);
           };
       })();
       //文本框输入内容进行动态提示
       $('#involveworks').keyup(function () {
           delay(function () {
               var works = $('#involveworks').val();
               if(works.length>0){ //当文本内容不为空时进行异步检索
                   var map = {"involve_works":works} //传入bean 查询条件
                   var report = {}
                   report.table ='sued';
                   report.map = map ;
                   report.pageNumber = 1 ;
                   report.pageSize = 5;
                   var data = JSON.stringify(report);
                   $.ajax({
                       type: 'POST',
                       url: '/findLawWorks',
                       data: data,
                       contentType: 'application/json',
                       success: function(data){
                         //  console.log(data[0].involve_works);
                           var tipHtml="";        //拼接html标签
                           $("#tip").show();
                           if(data.length<=0) {
                               $("#tip").hide();
                               return;
                           }else{
                               $("#tip").show();
                           }
                           for(var i=0;i<data.length;i++){
                               tipHtml+="<li>"+data[i].involve_works+"</li>";
                           }
                           //获得输入姓名文本框的宽度
                           var width=parseInt($("#involveworks").width());
                           //设置ul宽度和文本框的宽度相等
                           $("#tip").html(tipHtml).width(width);
                           $("#tip").css("position","relative").css("left",0).css("list-style-type","none");
                           $("#tip li").click(function(){
                               $("#tip").hide();
                               $("#involveworks").val($(this).text());
                           });
                       },
                       error:function(data) {
                           console.log(data.msg);
                       },
                   });
         };
           }, 500);
       });
   });

转载于:https://my.oschina.net/u/3483147/blog/1581919