使用 AJAX（短代码）的 Live WooCommerce 产品搜索表单

Question

虽然搜索表单有效，但我需要帮助解决在输入后表单为空时出现的问题。

我的意思是： 如果您开始输入搜索查询，您就会开始获得结果。这部分工作正常。 但是，如果您在输入时/之后从搜索表单中删除文本 - 您将获得所有产品的列表。

它应该只在输入时显示结果，如果为空则不显示任何内容。

修复： 在应用 Terminator-Barbapapa 提供和提供的解决方案的修改版本后，它按预期工作。

下面的代码可能不是 100% 正确，但它可以工作。

目前的代码：

    add_shortcode('live_search', 'live_search_function');
    function live_search_function() { ?>
    
        <input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>
    
        <div id="productfetch"></div>
    
        <?php
    }
    
add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() { ?>

    <script type="text/javascript">
    
        function fetch() {
            
            if( document.getElementById('keyword').value.trim().length == 0 ) {

                jQuery('#productfetch').html('');

            } else {

                jQuery.ajax( {

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

    </script>
<?php
}
    
    add_action('wp_ajax_data_fetch' , 'product_fetch');
    add_action('wp_ajax_nopriv_data_fetch','product_fetch');
    function product_fetch() {
    
        $the_query = new WP_Query( array( 'posts_per_page' => -1, 's' => esc_attr( $_POST['keyword'] ), 'post_type' => 'product' ) );
    
        if( $the_query->have_posts() ) :
            while( $the_query->have_posts() ): $the_query->the_post(); ?>
        
        <h2><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h2>
            <?php endwhile;
            wp_reset_postdata();
        endif;
    die();
    }

Answer 1

您可以在fetch() 函数中添加检查以查看您的输入字段是否为空。如果是这样，请清除 datafetch div，否则运行您的 AJAX。

add_action( 'wp_footer', 'ajax_fetch' );
function ajax_fetch() { ?>

    <script type="text/javascript">
    
        function fetch() {
            
            if( document.getElementById('keyword').value.trim().length == 0 ) {

                jQuery('#productfetch').html('');

            } else {

                jQuery.ajax( {

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

    </script>
<?php
}