使用jquery AJAX进行实时搜索?

时间:2017-05-04 16:18:14

标签: jquery ajax wordpress livesearch

如何使用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 个答案:

答案 0 :(得分:0)

将ajax添加到ajaxFunction,当用户在搜索中键入或粘贴内容时,如果值大于3,这将起作用。

ajaxFunction将是这样的一些东西:

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>