.autocomplete不是函数错误

Question

下面是我的我的代码

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

我的Html代码是

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

我的功能是

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

我已将此页面包含在一个单独的文件中,其中包含我的网站的搜索代码,我已将其嵌入各种页面,在我的索引页面上,它建议我从源文件中获取值,但在其他页面上它给了我typerror在线

$( "#searcharea" ).autocomplete({

我的网站链接是:http: //www.jodhpuryp.in/

这是我自动提示框的来源 http://api.jqueryui.com/autocomplete/

任何人都可以告诉我,为什么我在我的网站的其他页面上工作索引页面时会收到此错误.感谢任何帮助.谢谢

Answer 1

发现问题,我为我的谷歌翻译包括另一个jquery文件,他们互相冲突,导致没有加载自动完成功能.

Answer 2

听起来像自动完成是在实际加载定义它的库之前调用的 - 如果这有意义的话？

如果您的脚本是内联的,而不是引用,请将其移动到页面底部.或者(我的首选选项)将脚本放在外部.js文件中,然后引用它:

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

编辑:如果您将脚本外部化,请确保在它依赖的任何JQuery库之后引用它:)

Answer 3

这很尴尬，但它使我困扰了一段时间，所以我想将其发布在这里。

我没有安装jQuery UI，只有经典的jQuery，显然不包含自动完成功能。添加以下标记可通过jQuery UI启用自动完成功能。

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

和..

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

值得注意的autocomplete="off"是，form或form块的HTML值将阻止浏览器执行该方法.autocomplete()，但不会阻止jQuery UI函数。