僅當來自之前ajax請求數據的項目不匹配時，Jquery自動完成ajax請求

Question

我正在使用jQuery自動完成。 它在每個我不想要的按鍵上發出一個AJAX請求。如果來自以前的AJAX請求的數據與搜索匹配，則不應再發出AJAX請求。

<script> 
    $('#tags').autocomplete({ 
     source: function (request, response) { 
      $.ajax({ 
       url: '/TestDDl/Index', 
       // data: "{ 'prefix': '" + request.term + "'}", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        response($.map(data.user, function (item) { 
         return { 
          label: data.name, 
          val: data.val 
         } 
        })) 
       }, 
       error: function (response) { 
        alert(response.responseText); 
       }, 
       failure: function (response) { 
        alert(response.responseText); 
       } 
      }); 
     }, 
     autoFocus: true, 
     keypress: function (event, ui) { 
      alert('Not Selected'); 
      if (!ui.item) { 
       alert('Not Selected'); 
      } 
     } 
    }); 
}); 

在這裏，如果我打字這已經是以前的AJAX請求數據的用戶的名稱，它不應該在旁邊的按鍵的AJAX請求。

Answer 1

您可以聲明一個變量，向用戶提供輸入，然後在您的成功函數中更新它。在進行下一次調用之前，請檢查您的變量是否與下一個數據匹配。

事情是這樣的：

<script> 
    var recent = ''; 
    $('#tags').autocomplete({ 
     source: function (request, response) { 
      if (recent == request.term) { 
       return; 
      } 
      recent = request.term; 
      $.ajax({ 
       url: '/TestDDl/Index', 
       data: "{ 'prefix': '" + request.term + "'}", 
       dataType: "json", 
       type: "POST", 
       contentType: "application/json; charset=utf-8", 
       success: function (data) { 
        response($.map(data.user, function (item) { 
         return { 
          label: data.name, 
          val: data.val 
         } 
        })) 
       }, 
       error: function (response) { 
        alert(response.responseText); 
       }, 
       failure: function (response) { 
        alert(response.responseText); 
       } 
      }); 
     }, 
     autoFocus: true, 
     keypress: function (event, ui) { 
      alert('Not Selected'); 
      if (!ui.item) { 
       alert('Not Selected'); 
      } 
     } 
    }); 
</script> 

Answer 2

您的下一個ajax請求應該在第一個ajax請求的Success函數中。在那裏購買邏輯。如果您發現該匹配不會調用第二個ajax請求，否則請調用第二個ajax請求，並且所有應該位於第一個Ajax請求的成功函數。

Answer 3

<script> 
    window.xyz = []; //For saving history 
    $('#tags').autocomplete({ 
     source: function (request, response) { 
      if(xyz[request]){ 
       response(xyz[request]); // Return previously saved data 
      }else(
       $.ajax({ 
        url: '/TestDDl/Index', 
        // data: "{ 'prefix': '" + request.term + "'}", 
        dataType: "json", 
        type: "POST", 
        contentType: "application/json; charset=utf-8", 
        success: function (data) { 
         var res = $.map(data.user, function (item) { 
          return { 
           label: data.name, 
           val: data.val 
          } 
         }); 
         xyz[request]=res; //set data to reuse later 
         response(res) 
        }, 
        error: function (response) { 
         alert(response.responseText); 
        }, 
        failure: function (response) { 
         alert(response.responseText); 
        } 
       }); 
      } 
     }, 
     autoFocus: true, 
     keypress: function (event, ui) { 
      alert('Not Selected'); 
      if (!ui.item) { 
       alert('Not Selected'); 
      } 
     } 
    }); 
</script>