weixin_33692284 2017-05-04 16:18 采纳率: 0%
浏览 98

使用jquery AJAX进行实时搜索?

How can I create a live search with Jquery AJAX, I used keypress or keyup event to loop query, but if I type 3 characters or more the AJAX will do 3 times or more.

My form:

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

Here my 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>   

And Here is my demo function:

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

And this is result when I type 3 characters: type 3 characters I type 2 chars: type 2 characters Who can help me it work 1 time no matter how many key press. Or it work fine anyway ! Thanks a lot !!

  • 写回答

1条回答 默认 最新

  • weixin_33713503 2017-05-04 16:26
    关注

    Add your ajax to the ajaxFunction and this will work when a user types or pastes content into the search if the value is larger than 3.

    The ajaxFunction will be somethign like this:

    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>

    </div>
    
    评论

报告相同问题?

悬赏问题

  • ¥15 Arduino红外遥控代码有问题
  • ¥15 数值计算离散正交多项式
  • ¥30 数值计算均差系数编程
  • ¥15 redis-full-check比较 两个集群的数据出错
  • ¥15 Matlab编程问题
  • ¥15 训练的多模态特征融合模型准确度很低怎么办
  • ¥15 kylin启动报错log4j类冲突
  • ¥15 超声波模块测距控制点灯,灯的闪烁很不稳定,经过调试发现测的距离偏大
  • ¥15 import arcpy出现importing _arcgisscripting 找不到相关程序
  • ¥15 onvif+openssl,vs2022编译openssl64