The dropdown list in autocomplete is not showing

Question

The dropdown list in autocomplete is not showing

hetious

2022年2月4日 18:01

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

Topic jquery-ui autocomplete plugins Wordpress

Category Web

Quang Hoang · Accepted Answer · 2018年12月4日 22:48

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 :)

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

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!.

The dropdown list in autocomplete is not showing

About