ajax — Autouzupełnianie/automatyczne sugerowanie interfejsu użytkownika JQuery w WordPress
![ajax — Autouzupełnianie/automatyczne sugerowanie interfejsu użytkownika JQuery w WordPress](https://oen.pl/wp-content/uploads/2023/09/apple-touch-icon@2.png)
Tworzę niestandardowy pasek wyszukiwania z rozwijaną kategorią w mojej witrynie wordpress woocommerce, ale automatyczna sugestia nie działa, wyświetlając tablicę odpowiedzi 0 w konsoli. Co jest nie tak z kodem? Jestem początkujący i nie mogłem zrozumieć.
To jest mój kod JQuery.
jQuery(document).ready(function ($) { // Autocomplete functionality $('#search-input').autocomplete({ source: function(request, response) { $.ajax({ type: 'POST', dataType: "json", url: custom_woocommerce_search_params.ajax_url, data: { action: 'custom_woocommerce_auto_suggest', search_query: request.term, key1: 'value1', key2: 'value2' }, success: function(data) { response(data); console.log('Response:', data); }, error: function(error) { console.log('Error:', error); } }); }, minLength: 2, // Minimum characters before triggering autocomplete select: function(event, ui) { // Handle selection here console.log('Selected Item:', ui.item.value); } }); });
A to mój kod php.
function custom_woocommerce_auto_suggest() { $search_query = sanitize_text_field($_POST['search_query']); $args = array( 's' => $search_query, 'post_type' => 'product', 'posts_per_page' => 5, 'tax_query' => array( 'relation' => 'OR', array( 'taxonomy' => 'product_cat', 'field' => 'name', 'terms' => $search_query, ), ), 'meta_query' => array( 'relation' => 'OR', array( 'key' => '_sku', 'value' => $search_query, 'compare' => '%LIKE%', ), array( 'key' => '_product_attributes', 'value' => $search_query, 'compare' => 'LIKE', ), ), ); $query = new WP_Query($args); $suggestions = array(); if ($query->have_posts()) { while ($query->have_posts()) { $query->the_post(); $suggestions[] = get_the_title(); } wp_reset_postdata(); } echo wp_send_json($suggestions); wp_die(); } add_action('wp_ajax_custom_woocommerce_auto_suggest', 'custom_woocommerce_auto_suggest'); add_action('wp_ajax_nopriv_custom_woocommerce_auto_suggest', 'custom_woocommerce_auto_suggest');
A oto skrypty kolejkowania.
// Enqueue necessary scripts and styles function custom_woocommerce_search_scripts() { wp_enqueue_script('jquery-ui-autocomplete', ' array('jquery'), '1.12.1', true); wp_enqueue_script('custom-woocommerce-search', plugins_url('/js/custom-woocommerce-search.js', __FILE__), array('jquery'), '1.0', true); // Localize script with the category data $categories = get_terms('product_cat', array('hide_empty' => false)); wp_localize_script('custom-woocommerce-search', 'custom_woocommerce_search_params', array( 'categories' => $categories, 'ajax_url' => admin_url('admin-ajax.php'), )); } add_action('wp_enqueue_scripts', 'custom_woocommerce_search_scripts');