[jQuery] cant get autocomplete to work

[jQuery] cant get autocomplete to work


i have been tryign for a while to get autocomplete to work on a page
of my internal website with no success. i have used it before on
other sites but for some reason i can't get it to work here:
i know that the autoComplete_PhoneList.cfm and
autoComplete_docsearch.cfm files return valid xml data.
below is my code - can anyone help??
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://
www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html;
charset=iso-8859-1" />
<title>Sunnyview Rehabilitation Hospital Intranet</title>
<link href="./newStyle.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="backend/javascripts/subModal/
submodal.css" type="text/css" />
<script language="javascript" type="text/javascript" src="backend/
javascripts/jquery/jquery-latest.pack.js"></script>
<script language="javascript" type="text/javascript" src="backend/
javascripts/jquery/plugins/interface/interface.js"></script>
<script language="javascript" type="text/javascript" src="backend/
javascripts/subModal/submodalsource.js"></script>
<script language="javascript" type="text/javascript">
<!--
function randomImage ()
{
    var imagenumber = 8 ;
    var randomnumber = Math.random() ;
    var rand1 = Math.round( (imagenumber-1) * randomnumber) + 1 ;
    images = new Array;
    images[1] = "../pix/main_pic.gif";
    images[2] = "../pix/main_pic2.gif";
    images[3] = "../pix/main_pic3.gif";
    images[4] = "../pix/main_pic4.gif";
    images[5] = "../pix/main_pic5.gif";
    images[6] = "../pix/main_pic6.gif";
    images[7] = "../pix/main_pic7.gif";
    images[8] = "../pix/main_pic8.gif";
    var image = images[rand1];
    var imagetag ="<img src=\""+image+"\" alt=\"Picture of Sunnyview
Employees and Patients\" style=\"float:left;\" />";
    document.write(imagetag);
}
//-->
</script>
<script type="text/javascript" language="javascript">
//whenthe DOM is ready (page is loaded)
$(document).ready(function() {
//autocomplete for Document Search on index.cfm
    $('#autocomplete1').Autocomplete(
     {
     source: 'autocomplete_docSearch.cfm',
     delay: 50,
     fx: {
     type: 'slide',
     duration: 100
     },
     autofill: false,
     helperClass: 'autocompleter',
     selectClass: 'selectAutocompleter',
     minchars: 1
     }
     );
// Autocomplete for Phone List Search
$('#autocompletePhone').Autocomplete(
     {
     source: 'autocomplete_PhoneList.cfm',
     delay: 50,
     fx: {
     type: 'slide',
     duration: 100
     },
     autofill: false,
     helperClass: 'autocompleter',
     selectClass: 'selectAutocompleter',
     minchars: 1
     }
     );
});
</script>
<!-- Local Styles -->
<style type="text/css" media="all">
.autocompleter
{
    border: 1px solid #6FBEFF;
    width: 250px;
    background-color: #EFF8FF;
}
.autocompleter ul li
{
    padding: 2px 10px;
    white-space: nowrap;
    font-size: 11px;
}
.selectAutocompleter
{
    background-color: #6FBEFF;
}
</style>
</head>
<body>
<div id="wrapper">
    <div id="header">
        <form name="searchForm" action="./index.cfm?
page=docsearch&amp;submitted=TRUE" method="post" style="padding-top:
68px; padding-left:100px;">
                <input id="autocomplete1" type="text" name="SearchTerms" size="30"
maxlength="255" value="" style="border: 1px solid #185693; font-
family:Arial, Helvetica, sans-serif; font-size:12px; height:17px;
color:#006699;" />
                 <input id="docSearch" type="submit" value="Search Documents"
style="border: 1px solid #185693; font-family:Arial, Helvetica, sans-
serif; font-size:11px; background-color:#dce9f5; color:#006699;" />
        </form>
    </div>
    <div id="nav">
     <ul id="navlist">
        <li><a href="http://sunweb">Home</a></li>
        <li><a href="http://sunweb/calendar">Reserve Projector</a></li>
        <li><a href="./index.cfm?page=LunchMenu">Lunch Menu</a></li>
        <li><a href="http://sunweb/forums/viewforum.php?f=36">Suggestion
Box</a></li>
        <li><a href="./index.cfm?page=education">Education</a></li>
     </ul>
    </div>
    <div id="column1">
        <div id="column1Content">
                    <br />
<center>
<form name="form1" action="./index.cfm?
page=directory&amp;mode=search" method="post">
<input type="text" name="mystring" id="autocompletePhone"/