Rechercher

Chercher en AJAX dans WordPress

Placeholder image
function mahiiro_ajax_search() {
    wp_register_script( 'mahii_ajax_search', get_template_directory_uri() . '/js/mahii-ajax-search.js', array() );
    wp_localize_script( 'mahii_ajax_search', 'mahii_ajax_search_params', array(
        'ajaxurl' => admin_url('admin-ajax.php')
    ) );
    wp_enqueue_script( 'mahii_ajax_search' );
}
add_action( 'wp_enqueue_scripts', 'mahiiro_ajax_search', 999 );

function mahii_ajax_search_ajax_handler(){
    // Sanitize the search query to prevent security issues
    $search_query = sanitize_text_field( $_POST['search'] );

    $args = array(
        's'                   => $search_query,
        'post_type'           => array( 'page', 'post', 'ressources', 'definitions' ),
        'post_status'         => 'publish',
        'posts_per_page'      => 5
    );

    $query = new WP_Query( $args ); 

    if( $query->have_posts() ) :
        while( $query->have_posts() ): $query->the_post(); 
            echo '<a href="'.get_the_permalink().'">';
            if( has_post_thumbnail() ) {
                the_post_thumbnail('thumbnail');
            } else {
                echo 'Image par défaut';
            }
            the_title('<span>', '</span>');
            echo '</a>';
        endwhile;
        wp_reset_postdata(); // Always reset the post data after a custom query
    else: 
        echo "<p>Il n'y a pas de résultats pour votre recherche</p>";
    endif;

    wp_die();
}
// Contenu du fichier /js/mahii-ajax-search.js (dans l'exemple)
const ajaxSearch = document.getElementById('ajax-search');
const ajaxResults = document.getElementById('ajax-search-results');
let searchTimeout;

if (ajaxSearch !== null) {
    ajaxSearch.addEventListener('input', event => {
        const formData = new FormData();
        formData.append('action', 'ajaxsearch');
        clearTimeout(searchTimeout);

        if (ajaxSearch.value.length >= 3) {
            searchTimeout = setTimeout(() => {
                ajaxResults.innerHTML = "";
                formData.append('search', ajaxSearch.value); // No need for JSON.stringify()

                if (ajaxResults !== null) {
                    ajaxResults.classList.add('loading');
                    fetch(mahii_ajax_search_params.ajaxurl, {
                        method: "POST",
                        body: formData, // FormData automatically handles multipart data
                    }).then(response => {
                        return response.text();
                    }).then(response => {
                        if (response) {
                            ajaxResults.innerHTML = response;
                            ajaxResults.classList.remove('loading');
                        }
                    }).catch(error => {
                        console.log(error);
                    });
                }
            }, 300);
        }
    });

    ajaxSearch.addEventListener('blur', () => {
        if (ajaxResults !== null && ajaxSearch.value === '') {
            ajaxResults.classList.remove('loading');
        }
    });

    ajaxSearch.addEventListener('search', () => {
        if (ajaxSearch.value === '') {
            if (ajaxResults !== null) {
                ajaxResults.classList.remove('loading');
            }
        }
    });
}