.autocomplete不是函数错误

时间：2013-10-25 13:25:19

标签： jquery html autocomplete autosuggest

下面是我的我的代码

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

任何人都可以告诉我，为什么我在我的网站的其他页面上处理索引页面时会出现此错误。非常感谢。谢谢

15 个答案:

答案 0 :(得分：38)

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

答案 1 :(得分：20)

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

如果您的脚本是内联的，而不是引用，请将其移至页面底部。或者（我的首选选项）将脚本放在外部.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库之后引用它：）

答案 2 :(得分：2)

对于我的情况，我的另一个团队成员在他添加bootstrap.min.js时包含了另一个版本的jquery.js。删除额外的jquery.js后，问题就解决了

答案 3 :(得分：1)

请注意，如果您没有使用完整的jquery UI库，那么如果您缺少Widget，Menu，Position或Core，则可以触发此操作。根据您的jQuery UI版本，可能存在不同的依赖关系

答案 4 :(得分：1)

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

我没有安装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"将阻止浏览器执行自动完成，但不会阻止jQuery UI函数。

答案 5 :(得分：0)

您在页面加载jQuery之前调用该函数。 总是建议在$（document）中使用jQuery .ready（function（）{//你的代码在这里}）

在你的情况下：

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

}）;

答案 6 :(得分：0)

我的问题最终是视觉工作室捕获未处理的异常并阻止脚本进一步运行。因为我在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) { }

            }
        })

答案 7 :(得分：0)

我在ASP.net中遇到此错误。 当我从visual studio运行应用程序时它工作得很好，但是当我发布项目并测试它时，我在chrom Inspect调试器中遇到了“自动完成不是函数”的错误。 我发现两个环境之间的差异是由web.config中的定义引起的。在编译标签中。如果指定debug =“false”，则执行所有bundel定义，并将编译作为发布完成。如果debug = true“那么编译是针对不包括bundeling和minifyning 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 lib我看到了两个jquery-ui文件：

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

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

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

顺便说一句，jquery-ui.min.js没有包含自动填充函数，该函数与包含它的jquery-ui.js相对应。

欢呼声。

答案 8 :(得分：0)

如果您的页面有一个脚本部分，如下所示，那么请确保从本节内部引用您的Jquery库。

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

答案 9 :(得分：0)

看到此问题时，请始终将自动完成功能放在keyup函数中，并确保已添加库

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

答案 10 :(得分：0)

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

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

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

并且您必须在html的头部添加jquery-ui.css，我不明白为什么没有它就无法工作！

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

希望您的问题得到解决。

并确保您包括/安装以下三个

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

答案 11 :(得分：0)

在浏览器检查工具中检查“源”->“脚本”。有时可以引用多个jQuery文件。在ASP.NET MVC中，这通常在布局页面已经具有jQuery参考时发生。

答案 12 :(得分：0)

中可能添加了多个jquery.js文件，所以出现了此冲突。

答案 13 :(得分：-1)

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

答案 14 :(得分：-2)

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

相关问题
最新问题