.autocomplete is not a function Error

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

Solution 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.

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

Solution 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.