Jquery autocomplete is not a function

Question

I am trying to implement JQuery's autocomplete function into an input field on a website. The inspector is giving me an error that says:

"Uncaught TypeError: $(...).autocomplete is not a function".

I believe the problem might have to do with the order of my script tags but so far everything I have tried has not worked. Here is my content:

<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
    var schools = new Array();
        $(document).ready(function () {

            $("#school").autocomplete ({
                minLength: 2,
                source: schools,
                select: function (e, ui) {
                    e.target.value = ui.item.label;
                    $("#schoolValue").val(ui.item.value);
                    e.preventDefault();
                }
            });
    </script>
  </body>

score 2 · Answer 1 · answered Oct 09 '15 at 17:51

You haven't define any element with school id. Check below working code to compare with your own.

var schools = ['abc', 'xyz'];
$(document).ready(function() {

  $("#school").autocomplete({
    minLength: 2,
    source: schools,
    select: function(e, ui) {
      e.target.value = ui.item.label;
      $("#schoolValue").val(ui.item.value);
      e.preventDefault();
    }
  });
});

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

<head>
  <title></title>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
</head>

<body>
  <label for="school">Tags:</label>
  <input id="school">
</body>

score 1 · Answer 2 · answered Oct 09 '15 at 17:48

In the code above doesn't look like you are closing the ready function correctly.

<head>
<title></title>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
</head>
<body>
    <script type="text/javascript">
    var schools = new Array();
        $(document).ready(function () {

            $("#school").autocomplete ({
                minLength: 2,
                source: schools,
                select: function (e, ui) {
                    e.target.value = ui.item.label;
                    $("#schoolValue").val(ui.item.value);
                    e.preventDefault();
                }
            });
        });
    </script>
  </body>

Sorry I miss copied it into my post. In my actual code this is properly closed. Do you have any other suggestions? — Christian, Oct 09 '15 at 17:50
Yea I would check next to make sure jqueryui was completely loaded before you tried to use it. — AtheistP3ace, Oct 09 '15 at 17:54

score 1 · Answer 3 · answered Oct 09 '15 at 17:54

The code seems to work but you need to initialize your array of schools. See running example below.

Also remember, you need to type at least two letters for the drop down to appear.

var schools = ['aaaaa', 'bbbbb', 'cccccc', 'ddddd'];

$(document).ready(function() {

  $("#school").autocomplete({
    minLength: 2,
    source: schools,
    select: function(e, ui) {
      e.target.value = ui.item.label;
      $("#schoolValue").val(ui.item.value);
      e.preventDefault();
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Search school
<input id="school" type="text">
<br/><br/>School selected
<input type="text" id="schoolValue" />

score 0 · Answer 4 · edited May 23 '17 at 10:27

Looks like it could be a race condition, meaning that the jquery script hasn't finished loading by the time you start trying to use it. You have document ready, which is good, but that only checks that the DOM is ready, not that asynchronously loaded scripts are done loading.

There are some answers to this here and elsewhere : How to make script execution wait until jquery is loaded

But in short, you can defer your method execution until window.jQuery returns true, try $( window ).load or you can use something like require.js to do it for you. You should also touch up your script tags:

<script type="text/javascript" src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>

Jquery autocomplete is not a function

4 Answers4