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