.autocomplete is not a function Error

Question

below is my My Code

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>

And my Html code is

<div class="ui-widget">
<input name="searcharea" class="selectarea" id="searcharea" type="text" value="" placeholder="Area">
</div>

And my Function is

<script>
$(function(){
    $( "#searcharea" ).autocomplete({
        source: "suggestions.php"
    });
    $( "#searchcat" ).autocomplete({
        source: "suggestions1.php"
    });
});
</script>

I have included this page into a seperate file with search code of my website and I have embeded it on various pages, On my index page, it is suggesting me values from source files, but on other pages it is giving me typerror on line

$( "#searcharea" ).autocomplete({

My website link is: http://www.jodhpuryp.in/

This is source of my autosuggestion box http://api.jqueryui.com/autocomplete/

Can anybody tell me, why I am getting this error on other pages of my website while its working on index page.Any help is appreciated.Thanks

Wiretap

For some reason jqueryui.js is not being loaded on your page. Check for errors in your console. – Puryear

I did, no errors are coming, the only error is TypeError which says autocomplete is not defined :| – Wiretap

The code you've got should work: jsfiddle.net/5TSDG. Check your scripts are loading correctly. – Puryear

I found out that the search code is not working only on registershop.php , its working on rest of pages(pretty big relief) – Wiretap

@RoryMcCrossan the jqueryui.js is loading , I have seen it in console. But it is not able to find autocomplete :S – Wiretap

Answer 1

Found the problem, I was including another jquery file for my google translator, they were conflicting with each other and resulting in not loading the autocomplete function.

Wiretap

Dude, I can't even tell you how much this helped. Such an odd error to have. – Armenia

This helped me to resolve. In my Layout page also had a reference to jQuery and I had added again in page level. – Fantail

I lost half a day to this, turned out another plugin was injecting a second jQuery. Their docs did provide a way to load the library without the extra jQuery. – Strasser

Answer 2

Sounds like autocomplete is being called before the library that defines it is actually loaded - if that makes sense?

If your script is inline, rather than referenced, move it to the bottom of the page. Or (my preferred option) place the script in an external .js file and then reference it:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="yourNewJSFile"></script>

Edit: if you externalise your script, ensure it is referenced AFTER any JQuery libraries it relies on :)

Dicentra

I am loading content in same order as u said above and maybe thats why its working on all pages except one. I also tried the external java file method. but its working on all pages except the one I mentioned :| – Wiretap

OK, friend - I just looked at the source of your page. My first suggestions is to ensure your doctype is at the top of the page. Currently you have something above it. This can cause strange errors in browers. – Dicentra

suggestion taken , and it will be updated by night :) – Wiretap

Answer 3

This is embarrassing but it held me up for a while so I figured I would post it here.

I did not have jQuery UI installed, only classic jQuery, which does not include autocomplete (apparently). Adding the following tags enabled autocomplete via jQuery UI.

<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">

and

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

Of note, the HTML value autocomplete="off" for either the form or form block will prevent the brower from performing the method .autocomplete(), but will not block the jQuery UI function.

Pheni

Thanks for choosing to share this. This saved me some trouble :) – Apfel

Answer 4

For my case, my another team member included another version of jquery.js when he add in bootstrap.min.js. After remove the extra jquery.js, the problem is solved

Haversack

Answer 5

Possibly multiple jquery.js file are added in , and the conflict appeared.

Mapes

Legend! indeed there was some merge conflicts and it happens that more than one jquery library was added. – Leasehold

Answer 6

Note that if you're not using the full jquery UI library, this can be triggered if you're missing Widget, Menu, Position, or Core. There might be different dependencies depending on your version of jQuery UI

Restive

Answer 7

You are calling the function before the page loads jQuery. It is always advisable to use jQuery inside

$(document).ready(function(){ //Your code here });

In your case:

$(document).ready(function(){
   $(function(){
      $( "#searcharea" ).autocomplete({
         source: "suggestions.php"
      });
      $( "#searchcat" ).autocomplete({
         source: "suggestions1.php"
      });
   });
});

Displease

Answer 8

My issue ended up being visual studio catching an unhandled exception and preventing the script from running any further. Because I was running in the IDE, it looked like there was an issue when there wasn't. Autocomplete was working just fine. I added a try/catch block and that made the IDE happy.

 $.ajax({
            url: "/MyController/MyAction",
            type: "POST",
            dataType: "json",
            data: { prefix: request.term },
            success: function (data) {
                try {
                    response($.map(data, function (item) {
                        return { label: item.Name, value: item.Name };
                    }))
                } catch (err) { }

            }
        })

Khalif

Answer 9

I've got this error working in ASP.net. When I run the application from visual studio it worked all fine, but when I published the project and tested it , I've got that error "Autocomplete is not a function" in chrom Inspect debugger. I found out that the deferences between two environments were caused by a definition in web.config. in compilation tag. if assign debug="false" then all bundel definitions are executed and compilation is done as a release. if debug = true" then compilation is for a debug stage that not include bundeling and minifyning js library. Therefore the deferences between environments.

<system.web>
    <compilation debug="false" targetFramework="4.5.1"/>
    <httpRuntime targetFramework="4.5.1"/>
</system.web>

In addition, examining those two environments I saw that for debug environment everywhere (_Layout.cshtml) @Scripts.Render("~/bundles/jquery") was in the code, where (under APP_Start) BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

it rended as:

<script src="/Static/js/lib/jquery-1.12.4.js"></script>
<script src="/Static/js/lib/jquery-ui.js"></script>

and the other environment (debug = false)

<script src="/bundles/jquery?v=YOLEkbKJYtNeDq0o56xjzXWKoYzrF5Vkqgyc9Cb0YgI1"></script>

In debug mode it works and the other one got the problem.

Aspecting the js lib I saw two files of jquery-ui:

jquery-ui.js jquery-ui.min.js

it turns out that both of them come as default from the template of new mvc project. When jquery-ui.min.js was deleted from the library the problem resolved.

I belive that even though jquery-ui.js was defined in BundleConfig.cs, actually jquery-ui.min.js was taken.

By the way, jquery-ui.min.js didn't include autocomple function apposed to jquery-ui.js that included it.

cheers.

Loya

Later on Find out that new mvc project did include jquery-ui but without the functionality of autocomplete. Therefore an update was made . But unfortunatly the minified version wasn't updated so it didn't include autocomlete function. – Loya

Answer 10

If your page has a section for Scripts such as the following, then ensure you refer to your Jquery library from inside this section.

@section Scripts 
{ 
   <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
} 

Bibliophage

Answer 11

when you see this problem always put your autocomplete function in keyup function and ensure you have added the libraries

$( "#searcharea" ).keyup(function(){
   $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
   });
});

Bohemian

Could you please provide another way, it's not working – Transpierce

$(document).delegate('#searcharea','keyup',function(){ $(this).autocomplete({ source: "suggestions.php" }); }); Check this.. – Bohemian

Answer 12

I faced the same problem and try to solve, but unfortunately it wouldn't work anymore ! If you are facing the same problem and can't find the solution, it may help you.

If you configure jquery/jquery-ui globally in webpack, you need to import autocomplete like this

import { autocomplete } from 'webpack-jquery-ui';

And you must include jquery-ui.css in the head section of html, i don't understand why its not working without it!

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

Hope your problem will be solved.

And make sure you include/install the following three

1. jquery-ui-css
2. jquery-ui
3. jquery

Wintertide

Add "import {autocomplete } from..." in what file? – Seizure

@AndrewKoper where you want to use atutocomplete. – Wintertide

Answer 13

Check the Sources-> Scripts in browser Inspect tool. Sometimes multiple jQuery files can be referring. In ASP.NET MVC, this usually happens when the layout page already has a jQuery reference.

Fantail

Answer 14

Thirdparty js packages:

I figured out most of the time the problem is about mis conflicting your jQuery packages.

If you are sure that

1-you attached jQuery in your code

2-you have jQueryUI too

and again the problem appeared in;

indeed you have to look for an another eventual jQuery package attached in your page. In some projects there is an another jQuery pakage(sometime with changed name like app.js) makes the problem. Remove it and check the result again.

Xylon

Answer 15

Loading jQuery library before Angularjs library helped me.

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

Leoine

Answer 16

<head>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

Flagellant

This is not an answer. – Humidifier