The JQuery UI Demo page for autocomplete has a nice looking search box and drop down. When I implement it in my plugin, I end up with a bulleted list. How do I get my drop down of suggestions to look like theirs?As results shown in console but just bullet points here. enter image description here

Yes,this is my code i applied some css by inspecting classes but the issue not resolved.

jQuery(document).ready(function($) {
    // ... Your existing code ...
    console.log('Autocomplete initialized'); 

    // Autocomplete functionality
        source: function(request, response) {
                type: 'POST',
                datatype: 'json',
                url: custom_woocommerce_search_params.ajax_url,
                data: {
                    action: 'custom_woocommerce_auto_suggest',
                    search_query: request.term,
                success: function (data) {
                         // Clear previous suggestions
                error: function(error) {
                    console.log('Error:', error);
        minLength: 2, // Minimum characters before triggering autocomplete
        select: function(event, ui) {
            // Handle selection if needed
  • This sounds like a styling issue that might be more appropriate on StackOverflow. On either site you'll want to include your plugin code so folks can help - it wouldn't be possible to troubleshoot without knowing what the markup looks like.
    – WebElaine
    Jan 29 at 13:32
  • Yes , i added the code plz check
    – Tuba Saif
    Jan 29 at 14:11
  • Have you enqueued the jQuery UI styles, e.g. the base theme? Because WordPress does not load the styles automatically, only the script. See wordpress.stackexchange.com/a/273996
    – Sally CJ
    Jan 29 at 14:17
  • I enqueue these style and scripts for Jquery autocomplete ui. wp_enqueue_style("jquery-ui-styles"); wp_enqueue_script("jquery"); wp_enqueue_script("jquery-ui-autocomplete");
    – Tuba Saif
    Jan 29 at 15:35
  • Either your theme or another plugin could be the culprit. Inspecting the elements to find out which element the bullets are on, and which stylesheet is applying them, should give you enough information to override them. Without access to the codebase anyone else would just be guessing.
    – WebElaine
    Jan 29 at 22:11


Your Answer

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