AJAX实时搜索帖子标题

时间：2016-09-21 作者：FRQ6692

我正在创建一个AJAX live搜索，以过滤wordpress主题中的帖子标题。当我在输入中写东西时，它会显示结果中的所有帖子，而不是过滤它以获得自定义帖子。。

How to search live and find a post with AJAX??

Function.php

<?php 
add_action(\'wp_ajax_my_action\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_my_action\',\'data_fetch\');

function data_fetch(){
    $the_query = new WP_Query(array(\'post_per_page\'=>5));
    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();
}?>

Script:

<script>
function fetch(){

    $.post(\'<?php echo admin_url(\'admin-ajax.php\'); ?>\',{\'action\':\'my_action\'},
    function(response){
        $(\'#datafetch\').append(response);
        console.log(result);
    });
}
</script>

HTML:

<input type="text" onkeyup="fetch()"></input>
    <div id="datafetch">
</div>

4 个回复
最合适的回答,由SO网友:Ahmed Fouad 整理而成

这是一个有效的解决方案（按原样测试）

The HTML (could be part of page content)

<input type="text" name="keyword" id="keyword" onkeyup="fetch()"></input>

<div id="datafetch">Search results will appear here</div>

The JavaScript ( goes to your theme\'s functions.php )

// add the ajax fetch 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
}
And finally the AJAX call 转到主题的功能。php

// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){

    $the_query = new WP_Query( array( \'posts_per_page\' => -1, \'s\' => esc_attr( $_POST[\'keyword\'] ), \'post_type\' => \'post\' ) );
    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();
}
补充：下面是我如何精确搜索AJAX函数的：

// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){

    $the_query = new WP_Query( 
      array( 
        \'posts_per_page\' => -1, 
        \'s\' => esc_attr( $_POST[\'keyword\'] ), 
        \'post_type\' => \'post\' 
      ) 
    );


    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post();

$myquery = esc_attr( $_POST[\'keyword\'] );
$a = $myquery;
$search = get_the_title();
if( stripos("/{$search}/", $a) !== false) {?>
            <h4><a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a></h4>
        <?php
                                  }
    endwhile;
        wp_reset_postdata();  
    endif;

    die();
}

SO网友:nier

您忘记将其作为searchinput调用，您可以将下面的代码粘贴到函数中。php

// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){

    $the_query = new WP_Query( array( \'posts_per_page\' => 5, \'s\' => esc_attr( $_POST[\'keyword\'] ), \'post_type\' => \'post\' ) );
    if( $the_query->have_posts() ) :
        while( $the_query->have_posts() ): $the_query->the_post(); ?>

            <a href="<?php echo esc_url( post_permalink() ); ?>"><?php the_title();?></a>

        <?php endwhile;
        wp_reset_postdata();  
    else: 
        echo \'<h3>No Results Found</h3>\';
    endif;
        die();
    }

    // add the ajax fetch js
    add_action( \'wp_footer\', \'ajax_fetch\' );
    function ajax_fetch() {
    ?>
    <script type="text/javascript">
    function fetchResults(){
        var keyword = jQuery(\'#searchInput\').val();
        if(keyword == ""){
            jQuery(\'#datafetch\').html("");
        } else {
            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 );
                }
            });
        }

    }
    </script>

    <?php
    }
完成后，查找并打开searchform。php。现在要做的是，用上面的id元素（searchInput）替换id元素并添加以下代码

onkeyup=featechResult()"
在id元素旁边，所以整个代码如下所示

    <form method="get" class="td-search-form-widget" action="<?php echo esc_url(home_url( \'/\' )); ?>">
    <div role="search">
        <input class="td-widget-search-input" type="text" value="<?php echo get_search_query(); ?>" name="s" id="searchInput" onkeyup="fetchResults()" /><input class="wpb_button wpb_btn-inverse btn" type="submit" id="searchsubmit" value="<?php _etd(\'Search\', TD_THEME_NAME)?>" />
    </div>
</form>
确保在子主题中进行更改。现在最后一步：添加<div id="datafeatch"></div> 就在的上方，您可以在搜索表单中看到实时搜索。

您也可以通过live search plugin, 如果不知道如何编码，这是一种最简单的方法。我希望这有帮助。

SO网友:Sanjay Parmar
/* Filled in admin profile */
add_action( \'show_user_profile\', \'extra_user_profile_fields\' );
add_action( \'edit_user_profile\', \'extra_user_profile_fields\' );
function extra_user_profile_fields( $user ) { ?>
    <h3><?php _e("Extra profile information", "blank"); ?></h3>

    <table class="form-table">
    <tr>
        <th><label for="address"><?php _e("Address"); ?></label></th>
        <td>
            <input type="text" name="postSearch" id="postSearch" value="<?php echo esc_attr( get_the_author_meta( \'postSearch\', $user->ID ) ); ?>" class="regular-text" /><br />
            <span class="description"><?php _e("Please enter your address."); ?></span>
            <div id="datafetch"></div>
        </td>
    </tr>
    </table>
<?php }


// the jQuery Ajax call here
add_action( \'admin_footer\', \'ajax_fetch\' );
function ajax_fetch() {
?>
<script type="text/javascript">

    (function($){
        var searchRequest = null;

        jQuery(function () {
            var minlength = 3;

            jQuery("#postSearch").keyup(function () {
                var that = this,
                value = jQuery(this).val();

                if (value.length >= minlength ) {
                    if (searchRequest != null) 
                        searchRequest.abort();
                    searchRequest = jQuery.ajax({
                        type: "POST",
                        url: "<?php echo admin_url(\'admin-ajax.php\'); ?>",
                        data: {

                            action: \'data_fetch\',
                            search_keyword : value

                        },
                        dataType: "html",
                        success: function(data){
                            //we need to check if the value is the same
                            if (value==jQuery(that).val()) {
                                jQuery(\'#datafetch\').html(data);
                            }
                        }
                    });
                }
            });
        });
    }(jQuery));
</script>

<?php
}


// the ajax function
add_action(\'wp_ajax_data_fetch\' , \'data_fetch\');
add_action(\'wp_ajax_nopriv_data_fetch\',\'data_fetch\');
function data_fetch(){

    $the_query = new WP_Query( array( \'posts_per_page\' => -1, \'s\' => esc_attr( $_POST[\'search_keyword\'] ), \'post_type\' => \'post\' ) );
    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(); 
}
SO网友:Kings

我一直在使用这个插件：

wordpress live search插件的ajax search pro

这是最好的插件

你可以用这个在5秒钟内完成。

我在很多项目中都使用过这个插件。

标签： functions   jquery   ajax   html   小码农  

相关推荐

浏览器刷新时删除数据库条目，AJAX PHP jQuery

我有一个表单，在通过ajax提交表单时更新数据库表中的列。一切都很好，数据库表列可以获取信息，但一旦刷新浏览器，信息就会从数据库中删除。如果meta\\u值不存在，但meta\\u值也在提交表单时创建的数据库中，则PHP将执行数据库更新。我希望信息保留在数据库中，直到或除非meta\\u值被删除或不存在。任何见解都将不胜感激。PHPadd_action(\'wp_ajax_hide_this\', \'hide_this_by_id\'); add_action(\'wp_ajax_nopriv_