title: JQuery UI AutoComplete Implementation not working
body: <p>I am trying to implement the autocomplete provided with JQuery UI and I was wondering how I could do this by putting the source code provided:</p>
  
  <pre><code>  &lt;script&gt;
    $(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL"
      ];
      $( "#tags" ).autocomplete({
        source: availableTags
      });
    });
    &lt;/script&gt;
  </code></pre>
  
  <p>into my script.js file.  In my .html file i have:</p>
  
  <pre><code>    &lt;link rel="stylesheet" type="text/css" href="stylesheet.css"&gt;
      &lt;link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" /&gt;
  
      &lt;script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/jquery-1.9.1.js"&gt;&lt;/script&gt;
      &lt;script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="script.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>where script.js is my .js file.  I have tried putting this in my .js file:</p>
  
  <pre><code>$(document).ready(function() {
      var availableTags = [
        "ActionScript",
        "AppleScript",
        "Asp",
        "BASIC",
        "C",
        "C++",
        "Clojure",
        "COBOL"
      ];
      $( "#tags" ).autocomplete({
         source: availableTags
      });
  });
  </code></pre>
  
  <p>and this in my .html file:</p>
  
  <pre><code>&lt;form class="ui-widget" name="phoneForm"&gt;
      &lt;label for="tags"&gt;Tags: &lt;/label&gt;
      &lt;input id="tags" name="phoneItem" placeholder="Add a Phone"/&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>but this doesn't work.  Can anyone help me out as to what I am doing wrong and point me in the write direction?  Thanks!</p>