input框实时搜索

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/ministech/article/details/79229706

输入框中输入数据实时获取反馈。类似百度搜索。
连续输入以最后一次为准，间隔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);
 }