0

I am creating custom search bar with category dropdown in my wordpress woocommerce site but auto-suggest not working showing response array 0 in console.What's wrong with the code? I am a beginner i couldn't understand.

This is my JQuery code.

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

And This my php code.

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

And here is enqueue scripts.

// Enqueue necessary scripts and styles
function custom_woocommerce_search_scripts() {
    wp_enqueue_script('jquery-ui-autocomplete', 'https://code.jquery.com/ui/1.12.1/jquery-ui.js', 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');
3
  • Where is the code for custom_woocommerce_auto_suggest defined? Jan 25 at 13:28
  • I want ajax search bar with category dropdown for this i am trying to create plugin in which having two files "custom-woocommerce-search.php" and "custom-woocommerce-search.js" The above one JQuery code i created for autocomplete/auto-suggest and below that php function for autosuggest and in the last one i enqueue JQuery UI script. If my code is wrong plz do let me know and what's wrong.
    – Tuba Saif
    Jan 25 at 15:24
  • I think the problem is dataType. If you send data as JSON then WordPress can't find the action parameter. Try removing that line. Jan 26 at 3:39

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.