Your first example works fine with some minor alteration ( I will add it below), as can be seen here, http://jsfiddle.net/cDtv4/.
What you need to do is make sure the actual jquery and jquery-ui (and possibly the jquery-ui.css) scripts are loading on the page you want this to work on.
You can do this by viewing your source code, and if they are not present you need to enqueue them,
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
You should see something like this in your source:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js?ver=3.3.1"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
The 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"
];
$( "#custom_field_city" ).autocomplete({
source: availableTags
});
});