0

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

  • it looks like you're adding the autocomplete style twice, while not loading its script – cjbj May 18 '18 at 19:15
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' );
}
  1. 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!.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.