.autocomplete 不是函数错误答案

【问题标题】：.autocomplete is not a function Error.autocomplete 不是函数错误
【发布时间】：2013-11-04 15:34:58
【问题描述】：

下面是我的代码

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

我已将此页面包含在包含我网站搜索代码的单独文件中，并将其嵌入到各个页面上，在我的索引页面上，它建议我来自源文件的值，但在其他页面上它给了我打字错误上线

$( "#searcharea" ).autocomplete({

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

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

谁能告诉我，为什么我在网站的其他页面上出现此错误，而它在索引页面上工作。感谢任何帮助。谢谢

【问题讨论】：

由于某种原因，jqueryui.js 没有加载到您的页面上。检查控制台中的错误。
我做到了，没有错误出现，唯一的错误是 TypeError 说未定义自动完成：|
你得到的代码应该可以工作：jsfiddle.net/5TSDG。检查您的脚本是否正确加载。
我发现搜索代码不仅适用于 registershop.php ，它适用于其余页面（相当宽慰）
@RoryMcCrossan jqueryui.js 正在加载，我在控制台中看到了它。但它无法找到自动完成：S

标签： jquery html autocomplete autosuggest

【解决方案1】：

发现问题，我为我的谷歌翻译添加了另一个 jquery 文件，它们相互冲突，导致无法加载自动完成功能。

【讨论】：

老兄，我什至不能告诉你这有多大帮助。这么奇怪的错误。
这帮助我解决了。在我的布局页面中也有对 jQuery 的引用，我在页面级别再次添加。
我为此浪费了半天时间，结果发现另一个插件正在注入第二个 jQuery。他们的文档确实提供了一种无需额外 jQuery 即可加载库的方法。

【解决方案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 库之后引用它:)

【讨论】：

我正在按照您上面所说的顺序加载内容，也许这就是为什么它可以在除一个之外的所有页面上工作的原因。我还尝试了外部java文件方法。但它可以在所有页面上运行，除了我提到的那个：|
好的，朋友 - 我刚刚查看了您页面的来源。我的第一个建议是确保您的文档类型位于页面顶部。目前你有一些上面的东西。这可能会导致浏览器出现奇怪的错误。
建议采纳，晚上会更新:)

【解决方案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>

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

【讨论】：

感谢您选择分享此内容。这为我省去了一些麻烦:)

【解决方案4】：

就我而言，我的另一个团队成员在添加 bootstrap.min.js 时包含了另一个版本的 jquery.js。去掉多余的jquery.js后，问题就解决了

【讨论】：

【解决方案5】：

可能是添加了多个jquery.js文件，出现冲突。

【讨论】：

传奇！确实存在一些合并冲突，并且碰巧添加了多个 jquery 库。

【解决方案6】：

您在页面加载 jQuery 之前调用该函数。始终建议在内部使用 jQuery

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

在你的情况下：

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

【讨论】：

【解决方案7】：

请注意，如果您未使用完整的 jquery UI 库，则可能会在您缺少 Widget、Menu、Position 或 Core 时触发。根据您的 jQuery UI 版本，可能会有不同的依赖关系

【讨论】：

【解决方案8】：

我的问题最终是 Visual Studio 捕捉到未处理的异常并阻止脚本进一步运行。因为我在 IDE 中运行，所以看起来好像没有问题。自动完成工作得很好。我添加了一个 try/catch 块，这让 IDE 很高兴。

 $.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) { }

            }
        })

【讨论】：

【解决方案9】：

我在 ASP.net 中遇到了这个错误。当我从 Visual Studio 运行应用程序时，它工作得很好，但是当我发布项目并对其进行测试时，我在 chrom Inspect 调试器中出现错误“自动完成不是一个函数”。我发现两个环境之间的差异是由 web.config 中的定义引起的。在编译标签中。如果 assign debug="false" 那么所有的 bundel 定义都会被执行并且编译是作为一个版本完成的。如果 debug = true" 则编译用于不包括捆绑和缩小 js 库的调试阶段。因此环境之间的差异。

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

此外，检查这两个环境，我发现调试环境无处不在 (_Layout.cshtml) @Scripts.Render("~/bundles/jquery") 在代码中，其中（在 APP_Start 下）BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

原来是这样的：

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

和其他环境（debug = false）

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

在调试模式下它可以工作，而另一个有问题。

在js库方面我看到了jquery-ui的两个文件：

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

事实证明，它们都是来自新 mvc 项目模板的默认值。当 jquery-ui.min.js 从库中删除后，问题就解决了。

我相信即使 jquery-ui.js 是在 BundleConfig.cs 中定义的，实际上 jquery-ui.min.js 被占用了。

顺便说一句，jquery-ui.min.js 没有包含与包含它的 jquery-ui.js 相对的自动完成功能。

干杯。

【讨论】：

稍后发现新的 mvc 项目确实包含 jquery-ui 但没有自动完成功能。因此进行了更新。但遗憾的是缩小版没有更新，所以没有自动补全功能。

【解决方案10】：

如果您的页面有如下脚本部分，请确保您从该部分中引用您的 Jquery 库。

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

【讨论】：

【解决方案11】：

当你看到这个问题时，总是把你的自动完成功能放在 keyup 功能中，并确保你已经添加了库

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

【讨论】：

能否请您提供另一种方法，它不起作用
$(document).delegate('#searcharea','keyup',function(){ $(this).autocomplete({ source: "suggestions.php" }); });检查这个..

【解决方案12】：

我遇到了同样的问题并尝试解决，但不幸的是它不再起作用了！如果您面临同样的问题并且找不到解决方案，它可能会对您有所帮助。

如果在webpack中全局配置jquery/jquery-ui，需要像这样导入自动补全

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

而且你必须在 html 的 head 部分包含 jquery-ui.css，我不明白为什么没有它它就不能工作！

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

希望您的问题能得到解决。

并确保包含/安装以下三个

jquery-ui-css
jquery-ui
jquery

【讨论】：

在什么文件中添加“import {autocomplete } from...”？
@AndrewKoper 你想在哪里使用自动完成。

【解决方案13】：

Check the Sources-> Scripts in browser Inspect 工具。有时可以引用多个 jQuery 文件。在 ASP.NET MVC 中，这通常发生在布局页面已经有 jQuery 引用时。

【讨论】：

【解决方案14】：

在 Angularjs 库帮助我之前加载 jQuery 库。

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

【讨论】：

【解决方案15】：

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

【讨论】：

这不是答案。