CODEWITHSUNDEEP
jqueryjquery-ui
rix
rix

Reputation: 10632

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

I am getting the error TypeError: $(...).autocomplete is not a function when using the following code inside a Drupal module.

jQuery(document).ready(function($) {
        $("#search_text").autocomplete({
            source:results,
            minLength:2,
            position: { offset:'-30 0' },  
            select: function(event, ui ) { 
                    goTo(ui.item.value);
                    return false;
            }        
    }); 
});

jQuery is definitely loaded, and I have tried using a different variable for $ - any ideas what else might be the problem?

(Edit) Drupal specific answer for autocomplete:

drupal_add_library('system', 'ui.autocomplete');

Upvotes: 31

Views: 187933

Answers (7)

rohith kumar
rohith kumar

Reputation: 1

These Links aren't Working. My View Cdn's are These.

<!--AutoComplete-->
<link href="https://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.min.css" rel="stylesheet">
<script src="https://code.jquery.com/ui/1.10.2/jquery-ui.min.js"></script>
<link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/base/jquery-ui.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/jquery-ui.min.js"></script>

Upvotes: 0

Ravi Gadag
Ravi Gadag

Reputation: 15861

you missed jquery ui library. Use CDN of Jquery UI or if you want it locally then download the file from Jquery Ui

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src="YourJquery source path"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

Upvotes: 81

OMi Shah
OMi Shah

Reputation: 6186

Just add these to libraries to your project:

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

Save and reload. You're good to go.

Upvotes: 1

Mr world wide
Mr world wide

Reputation: 4814

Simple solution: The sequence is really matter while including the auto complete libraries:

<link href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css" rel="Stylesheet">
<script src='https://cdn.rawgit.com/pguso/jquery-plugin-circliful/master/js/jquery.circliful.min.js'></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js" ></script>

Upvotes: 4

ming
ming

Reputation: 445

In my case, I include an extra jquery library from TAMPERMONKEY script! Disable the script and it works.

Upvotes: 0

joshua1234511
joshua1234511

Reputation: 11

Try this code, Let $ be defined

(function ($, Drupal) {

  'use strict';

  Drupal.behaviors.module_name = {
    attach: function (context, settings) {
        jQuery(document).ready(function($) {
      $("#search_text").autocomplete({
          source:results,
          minLength:2,
          position: { offset:'-30 0' },  
          select: function(event, ui ) { 
                  goTo(ui.item.value);
                  return false;
          }        
        }); 
        });
   }
  };
})(jQuery, Drupal);

Upvotes: 1

Kumaresan Perumal
Kumaresan Perumal

Reputation: 1956

In my exprience I added two Jquery libraries in my file.The versions were jquery 1.11.1 and 2.1.Suddenly I took out 2.1 Jquery from my code. Then ran it and was working for me well. After trying out the first answer. please check out your file like I said above.

Upvotes: 3

Related Questions