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');
}
}
});
}