Autocomplete in jquery is not working but jquery is functioning properly

Question

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:-)

You are missed jquery ui import in your script. $.autocomplete is a part of ui — user2575725
– user2575725, Commented Feb 1, 2017 at 5: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
– Minksmnm, Commented Feb 1, 2017 at 5:11
The following link will solve your problem. stackoverflow.com/questions/39371754/… — Anoop H.N
– Anoop H.N, Commented Feb 1, 2017 at 5: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
– Pawan, Commented Feb 1, 2017 at 5:15
Have a look at the below post given by Aman, where he has used jquery-ui .js and .css — user2575725
– user2575725, Commented Feb 1, 2017 at 5:17

Mit Bhatt · Accepted Answer · 2017-02-01 05:17:41Z

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>

answered Feb 1, 2017 at 5:17

Mit Bhatt

4822 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Pawan Over a year ago

It worked.But can you plz tell me what was my mistake?

Mit Bhatt Over a year ago

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 Over a year ago

Kindly review stackoverflow.com/questions/1775990/… answers for further reference.

Pawan Over a year ago

Thank you very much.I want to display images too with the text do have any idea how to do it?

Aman Kumar · Accepted Answer · 2017-02-01 05:10:19Z

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>

Collectives™ on Stack Overflow

Autocomplete in jquery is not working but jquery is functioning properly

2 Answers 2

4 Comments

Check This autocomplete , this may help you

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Check This autocomplete , this may help you

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related