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>