title: Autocomplete in jquery is not working but jquery is functioning properly
body: <p>Here is my code:-</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
  
  
  &lt;script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>&lt;!-- Optional theme --&gt;
  &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous"&gt;
  
  &lt;!-- Latest compiled and minified JavaScript --&gt;
  &lt;script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&gt;&lt;/script&gt;
  &lt;script&gt;
  $( 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"
  ];
  $( "#tags" ).autocomplete({
    source: availableTags
  });
  } );
  $(document).ready(function($) {
  alert("js is working");
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div class="ui-widget"&gt;
   &lt;label for="tags"&gt;Tags: &lt;/label&gt;
  &lt;input id="tags"&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>It does give  me alert js is working which means my jquery is working but the problem is my autocomplete is not working. I get this error from chrome when I do inspect element 
    Uncaught TypeError: $(...).autocomplete is not a function
    at HTMLDocument. (test.html:41)   at j (jquery.min.js:2)   at k (jquery.min.js:2)(anonymous) @ test.html:41j @ jquery.min.js:2k @ jquery.min.js:2</p>
  
  <p>Thanks in advance:-)</p>