Note that jquery.autocomplete.js and jquery.js need to be connected together. This file can be found in my other article "Dynamic Loading Data AutoComplete (mysql database)" with source code/
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<title>jQuery Autocomplete Plugin</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type='text/javascript' src='js/jquery.autocomplete.js'></script>
<script type="text/javascript">
$().ready(function() { function log(event, data, formatted) { $("<li>").html( !data ? "No match!" : "Selected: " + formatted).appendTo("#result");}function formatItem(row) { return row[0] + " (<strong>id: " + row[1] + "</strong>)";}function formatResult(row) { return row[0].replace(/(<.+?>)/gi, '');}$("#suggest1").focus().autocomplete(cities);$("#suggest14").autocomplete(cities, {
matchContains: true,
minChars: 0
});
$("#suggest3").autocomplete(cities, { multiple: true,mustMatch: true,autoFill: true});$(":text, textarea").result(log).next().click(function() { $(this).prev().search();});$("#suggest4").result(function(event, data, formatted) { var hidden = $(this).parent().next().find(">:input");hidden.val( (hidden.val() ? hidden.val() + ";" : hidden.val()) + data[1]);});$("#scrollChange").click(changeScrollHeight);$("#clear").click(function() { $(":input").unautocomplete();}); }); function changeOptions(){
var max = parseInt(window.prompt('Please type number of items to display:', jQuery.Autocompleter.defaults.max));
if (max > 0) { $("#suggest1").setOptions({ max: max});} } </script> </head> <body> <div id="content"> <p><label>Single City (local):</label><input type="text" id="suggest1" /><input type="button" value="Get Value" /> </p><p> </p> <ol id="result"></ol> </div> <a href="autocompleteAjaxTag.jsp">autocompleteAjaxTag.jsp</a> </body> </html>