1

Here is my code:-

<html>
<head>


<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>


<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( 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");
});
</script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>

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

Thanks in advance:-)

Pawan
  • 71
  • 2
  • 9
  • You are missed jquery ui import in your script. `$.autocomplete` is a part of ui –  Feb 01 '17 at 05:11
  • the reason could be the order of your reference files that you included in the head.. Jquery library file should be at the top, after that Jquery-ui, then your autocomplete. – Minksmnm Feb 01 '17 at 05:11
  • The following link will solve your problem. http://stackoverflow.com/questions/39371754/jquery-3-1-0-and-jquery-ui-autocomplete-are-not-compatible-whats-the-workaroun][1] – Anoop H.N Feb 01 '17 at 05:15
  • @Arvind whar do you mean by UI import? I am using google cdn isn't that enough.If no then please tell me how to import jquery ui – Pawan Feb 01 '17 at 05:15
  • Have a look at the below post given by Aman, where he has used jquery-ui .js and .css –  Feb 01 '17 at 05:17
  • answer from Mit worked for me but I would love to know what was the problem and why those extra links are required? – Pawan Feb 01 '17 at 05:24

2 Answers2

1

Just include the below 2 lines in your code in section.

<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Below is the full working source code.

<html>
<head>


<script  src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script  src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script>
$( 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");
});
</script>
</head>
<body>
<div class="ui-widget">
 <label for="tags">Tags: </label>
<input id="tags">
</div>
</body>
</html>
Mit Bhatt
  • 472
  • 2
  • 11
  • It worked.But can you plz tell me what was my mistake? – Pawan Feb 01 '17 at 05:21
  • Yes, Sure. ".autocomplete" is a Functionality of jQuery-ui. jQuery Deals with DOM operations where as jQuery-ui deals with UI operations on top of DOM. You had included the jquery js/css but not jquery-ui.js/css. Since autocomplete is an advanced feature on top of DOM, it resides in jquery-ui – Mit Bhatt Feb 01 '17 at 05:25
  • Kindly review http://stackoverflow.com/questions/1775990/what-is-the-difference-between-jquery-and-jquery-ui answers for further reference. – Mit Bhatt Feb 01 '17 at 05:28
  • Thank you very much.I want to display images too with the text do have any idea how to do it? – Pawan Feb 01 '17 at 05:35
0

Check This autocomplete , this may help you

$( 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
    });
  } );
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Autocomplete - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
 
<div class="ui-widget">
  <label for="tags">Tags: </label>
  <input id="tags">
</div>
 
 
</body>
</html>
Aman Kumar
  • 4,533
  • 3
  • 18
  • 40