plugins - The dropdown list in autocomplete is not showing

I want to use jQuery UI and autocomplete in my search form. First I want to check whether any list will be displayed so I copied the code from the documentation and pasted it in my page template. The jQuery UI CSS and JS is loaded because I can see it in the Dev Tool in CHrome. However the dropdown list is not showing. I added the following HTML to my header.php

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

My JS

(function($){
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
})(jQuery);

and here is a code how I added jQuery UI and my search.js

    wp_enqueue_script('autocomplete', get_template_directory_uri() .'/js/jquery-ui.js', array('jquery'));

    wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'/js/search.js', array('jquery', 'autocomplete'));

    wp_enqueue_style('autocomplete.css', get_template_directory_uri() .'/css/jquery-ui.css');

I have no idea what am I doing wrong. I tried to add the search from in a diffrent places in my template, but the result is the same - not showing dropdown list. I am using Wordpress and Understrap theme.

thank you in advance for the tips

I want to use jQuery UI and autocomplete in my search form. First I want to check whether any list will be displayed so I copied the code from the documentation and pasted it in my page template. The jQuery UI CSS and JS is loaded because I can see it in the Dev Tool in CHrome. However the dropdown list is not showing. I added the following HTML to my header.php

<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>

My JS

(function($){
  var availableTags = [
    "ActionScript",
    "AppleScript",
    "Asp",
    "BASIC",
    "C",
    "C++",
    "Clojure",
    "COBOL",
    "ColdFusion",
    "Erlang",
    "Fortran",
    "Groovy",
    "Haskell",
    "Java",
    "JavaScript",
    "Lisp",
    "Perl",
    "PHP",
    "Python",
    "Ruby",
    "Scala",
    "Scheme"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
})(jQuery);

and here is a code how I added jQuery UI and my search.js

    wp_enqueue_script('autocomplete', get_template_directory_uri() .'/js/jquery-ui.js', array('jquery'));

    wp_enqueue_script('mysite-js', get_stylesheet_directory_uri().'/js/search.js', array('jquery', 'autocomplete'));

    wp_enqueue_style('autocomplete.css', get_template_directory_uri() .'/css/jquery-ui.css');

I have no idea what am I doing wrong. I tried to add the search from in a diffrent places in my template, but the result is the same - not showing dropdown list. I am using Wordpress and Understrap theme.

thank you in advance for the tips

• plugins
• jquery-ui
• autocomplete

Share Improve this question edited May 18, 2018 at 19:31 hetious asked May 18, 2018 at 19:05 hetioushetious 10111 silver badge22 bronze badges 1

• it looks like you're adding the autocomplete style twice, while not loading its script – cjbj Commented May 18, 2018 at 19:15

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I have tested on my localhost. It's working fine :) You can check it. Screenshot: http://nimb.ws/Vl1L0F

Default, WP has available support Autocomplete jQuery in Core. You can check it here. (find keyword 'jQuery UI Autocomplete').

You can try to follow my code and then test again :)

1. Add code to functions.php.

add_action( 'wp_enqueue_scripts', 'add_scripts' );
function add_scripts() {
    wp_enqueue_style( 'jquery-ui- 
 styles','http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css');
    wp_enqueue_style( 'demo-styles','https://jqueryui.com/resources/demos/style.css');
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'jquery-ui-autocomplete' );
    wp_enqueue_script( 'custom', get_template_directory_uri() . '/assets/js/custom.js' );
}

2. You create custom.js(you must check careful url contain file custom.js in your theme) to write js code.

jQuery(document).ready(function($) {
    var availableTags = [
      "ActionScript",
      "AppleScript",
      "Asp",
      "BASIC",
      "C",
      "C++",
      "Clojure",
      "COBOL",
      "ColdFusion",
      "Erlang",
      "Fortran",
      "Groovy",
      "Haskell",
      "Java",
      "JavaScript",
      "Lisp",
      "Perl",
      "PHP",
      "Python",
      "Ruby",
      "Scala",
      "Scheme"
    ];
    $( "#tags" ).autocomplete({
        source: availableTags
    });
});

Done!.