Unfortuantly I can’t link to the page as I’m currently building the site on my computer locally using XAMPP. However I think I’m overcomplicating things here.

The page in question is a blank page created with the Enfold template. On that page I’ve added a ‘Code Block’ using the advanced editor in Enfold.In that code block I have placed the HTML as shown above which has created a text input on the page.

Now I’ve inserted the code Josue has provided into my custom.js script located in enfold-child/js/custom.js
However because I’m also using the code Elliot provided above at no point is the custom.js file being accessed (in my opinion though I’m quite a novice).

Unfortunatly all these methods so far haven’t worked. Currently I’ve got:
-Elliots code in my function.php – which I’ve then wrapped my section of with the code supplied by Josue. (I’ll insert that code at the bottom of the post).
-The small bit of HTML in a code block on the required page.

Just to further describe the situation here’s a section of the page showing the text field:

add_action( 'wp_footer', 'enfold_customization_custom_js' );
function enfold_customization_custom_js() {
?>
<script type = "text/javascript">
(function(jQuery){
  jQuery(window).load(function() {
     jQuery(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"
  ];

jQuery( "#tags" ).autocomplete({
  source: availableTags
  });
});
  });
})(jQuery);
</script>
<?php
}

I’m also having trouble working out if I need to include any jquery ui files or if enfold has all the ones that are required.