ライブ検索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 2文字を入力してください： type 2 characters キーの押下数にかかわらず1回の作業に役立つ人は誰ですか？とにかくうまくいく！どうもありがとう ！！

Answer 1

値は3

よりも大きい場合ajaxFunctionは、このようなsomethignになり、検索にときに、ユーザーの種類やペーストコンテンツをajaxFunctionにあなたのAJAXを追加し、これは動作します：

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>