刚刚设法让ajax live search工作，这意味着我可以在输入中输入字符时立即获得结果。清除输入时出现问题，它将显示所有结果。当页面首次加载时，它不会显示所有内容。我不想在用户清空输入时显示所有结果。

这是当前代码：输入：

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
<div id="datafetch">Search results will appear here</div>

Ajax获取JS：

add_action( \'wp_footer\', \'ajax_fetch\' );
function ajax_fetch() {
?>
<script type="text/javascript">
function fetch() {

    jQuery.ajax({
        url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',
        type: \'post\',
        data: {
          action: \'data_fetch\',
          keyword: jQuery(\'#keyword\').val()
        },
        success: function(data) {
            jQuery(\'#datafetch\').html( data );
        }
    });

}
</script>
<?php
}

Ajax获取PHP：

add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');

function data_fetch() {
    $query = new WP_Query( array( \'posts_per_page\' => -1, \'s\' => esc_attr( $_POST[\'keyword\'] ), \'post_type\' => \'visitor\' ) );
    if( $query->have_posts() ) {
        while( $query->have_posts() ) {
          $query->the_post(); ?>

              <div id="check-in-visitor">
                <a href="mailto:<?php the_author_email(); ?>"><?php the_title(); ?><?php the_content(); ?></a>
              </div>
        <?php
        }
        wp_reset_postdata();
    }
    else {
        ?>
              <h2 style=\'font-weight:bold;color:#000\'>Nothing Found</h2>
              <div class="alert alert-info">
                <p>Sorry, but nothing matched your search criteria. Please try again with some different keywords.</p>
              </div>
    <?php
    }
  die();
}

我理解为什么会这样，因为在用户键控时，它会显示结果，而当输入中没有任何内容时，就会显示所有内容。但我不知道如何解决这个问题。

if ( ! empty( $_POST[\'keyword\'] ) && $query->have_posts() ) {

var keyword = jQuery(\'#keyword\').val();

if ( keyword ) {
    jQuery.ajax({
        url: \'<?php echo admin_url(\'admin-ajax.php\'); ?>\',
        type: \'post\',
        data: {
          action: \'data_fetch\',
          keyword: keyword
        },
        success: function(data) {
            jQuery(\'#datafetch\').html( data );
        }
    });
} else {
    jQuery(\'#datafetch\').html( \'\' );
}