jqueryui autocomplete doesn't work - jquery-ui

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.