1. 程式人生 > >input框實時搜尋

input框實時搜尋

輸入框中輸入資料實時獲取反饋。類似百度搜索。
連續輸入以最後一次為準,間隔500ms。

var _ajax,time1,time2,time3 = null;
$("#inputUrl").on("input propertychange", function () {
     if($("#inputUrl").val() == ''){
         return
     }
     if(_ajax && _ajax.readyState != 4) {
         _ajax.abort();
         clearTimeout(time3);
         clearTimeout(time1);
         clearTimeout(time2);
     }
     var
ajaxUrl = $("#inputUrl").val(); ajaxTime(ajaxUrl); }); function ajaxTime(url){ //實時搜尋 if(time3){ clearTimeout(time3); } time3 = setTimeout(function(){ _ajax = $.ajax({ url:'/erp/api/grasprule/mapper/', type:'POST', data:{'url'
:url}, beforeSend: function () { if(!$("#inputUrl").val() == ''){ time1 = setTimeout(function(){ //三秒後沒有返回資料提示 toastr.info("這一定是個長頁面!正在獲取最新內容和截圖"); time2 = setTimeout(function(){ //十秒後沒有返回資料提醒
toastr.info("正在努力,請稍等片刻..."); },7000); },3000); } }, success:function(data){ clearTimeout(time1); clearTimeout(time2); }, error:function(XMLHttpRequest, textStatus, errorThrown){ if(textStatus !== "abort"){ clearTimeout(time1); clearTimeout(time2); } } }) },500); }