jqueryui autocomplete doesn't work

Question

This is my code:

<script type="text/javascript" src="{THEME}/js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="{THEME}/js/jquery.form.min.js"></script>
<script type="text/javascript" src="{THEME}/js/jcarousellite_1.0.1.pack.js"></script>
<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $(function() {
        var availableTags = ["Canada", "United States", "United Kingdom", "Russia", "Iran", "Sweden", "France"];
        $("#searchQuery").autocomplete(availableTags);
    });
});
</script>

and the input which is in a container floated left.

<input type="text" placeholder="Your Query" id="searchQuery" />

Answer 1

You should not simply pass the array into the .autocomplete() method. You should specify that it is the source using the source option as shown below:

$(document).ready(function() {
  var availableTags = ["Canada", "United States", "United Kingdom", "Russia", "Iran", "Sweden", "France"];
  $("#searchQuery").autocomplete({
    source: availableTags
  });
});

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.2/themes/smoothness/jquery-ui.css">
<input type="text" placeholder="Your Query" id="searchQuery" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.2/jquery-ui.js"></script>

---

Side note: $(document).ready(function() {}) and $(function() {}) are the same. You only need either one of those. The later is a shorthand for the former.