jquery 輸入框 動態提示 用戶輸入的模糊匹配

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);
       });
   });