Live Search使用jQuery AJAX？

Question

如何使用Jquery AJAX創建實時搜索，我使用keypress或keyup事件來循環查詢，但是如果我鍵入3個或更多字符，則AJAX將執行3次或更多次。

我的形式：

<input class="keyword-search" type="text" name="s" autocomplete="off" placeholder="Where do you want to go?"> 

這裏我AJAX：

<script> 
    jQuery(document).ready(function(){ 
      (function($){ 
       $(".keyword-search").keypress(function(){ 
        var keyword = $(this).val(); 
        $(".search-appear").empty(); 
        $.ajax({ 
         type: "post", 
         url: "<?php echo admin_url('admin-ajax.php'); ?>", 
         data: { action: 'get_tour', keyword: keyword }, 
         beforeSend: function() {$("#loading").fadeIn('slow');}, 
         success: function(data) { 
          $("#loading").fadeOut('slow'); 
          $(".search-appear").append(data); 
          } 
        }); 
       }); 
      })(jQuery); 
     }); 
</script> 

，這裏是我的演示功能：

function get_tour() 
      echo 'Do something!'; 
     ?> 
     <?php die(); } 

這是當我輸入3個字符時的結果： type 3 characters I類型2字符： type 2 characters 無論有多少按鍵，誰都可以幫助我工作1次。或者它工作正常！非常感謝 ！！

Answer 1

你的Ajax添加到ajaxFunction，這將工作當用戶鍵入或粘貼內容到搜索如果該值大於3

的ajaxFunction將somethign這樣的：

var ajaxFunction = function(data) { 
    $.ajax({ 
     type: "post", 
     url: "<?php echo admin_url('admin-ajax.php'); ?>", 
     data: { action: 'get_tour', keyword: data }, 
     beforeSend: function() {$("#loading").fadeIn('slow');}, 
     success: function(data) { 
      $("#loading").fadeOut('slow'); 
      $(".search-appear").append(data); 
     } 
    }); 
    } 
} 

$(document).ready(function(){ 
 
    
 
    var ajaxFunction = function(val){ 
 
    $('#out').text('Val: ' + val); 
 
    } 
 
    
 
    $('#search').on('keyup paste',function(){ 
 
    if(this.value.length >= 3) 
 
     ajaxFunction(this.value); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" id="search"> 
 
<div id="out"></div>