Căutare live cu ajax pentru titlul articolelor

Ați uitat să îl apelați ca searchinput, puteți lipi codul de mai jos în functions.php

// funcția ajax
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>Nu s-au găsit rezultate</h3>';
    endif;
        die();
    }

    // adăugăm js-ul pentru preluarea ajax
    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
    }

După ce ați terminat, găsiți și deschideți searchform.php. Acum, ceea ce trebuie să faceți este să înlocuiți elementul id cu cel de mai sus (searchInput) și să adăugați acest cod

onkeyup=featechResult()"

Lângă elementul id, astfel încât codul final va arăta astfel

    <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('Căutare', TD_THEME_NAME)?>" />
    </div>
</form>

Asigurați-vă că faceți modificările în child theme. Ultimul pas: adăugați <div id="datafeatch"></div> chiar deasupra și veți putea vedea căutarea live în formularul de căutare.

Puteți face acest lucru și prin intermediul plugin-ului de căutare live, o metodă mai ușoară dacă nu știți să codificați. Sper că vă ajută.

/* Completat în profilul de administrator */
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("Informații suplimentare de profil", "blank"); ?></h3>

    <table class="form-table">
    <tr>
        <th><label for="address"><?php _e("Adresă"); ?></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("Vă rugăm să introduceți adresa dumneavoastră."); ?></span>
            <div id="datafetch"></div>
        </td>
    </tr>
    </table>
<?php }


// Apelul jQuery Ajax aici
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){
                            //trebuie să verificăm dacă valoarea este aceeași
                            if (value==jQuery(that).val()) {
                                jQuery('#datafetch').html(data);
                            }
                        }
                    });
                }
            });
        });
    }(jQuery));
</script>

<?php
}


// funcția ajax
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(); 
}

Am folosit acest plugin:

ajax-search-pro-for-wordpress-live-search-plugin

Este cel mai bun plugin

și poți face asta în 5 secunde folosindu-l.

Am folosit acest plugin în multe dintre proiectele mele.