38

下面是我的代码

<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/的来源

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

4

15 回答 15

58

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

于 2013-10-27T07:20:02.100 回答
26

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

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

于 2013-10-25T14:27:33.877 回答
19

这很尴尬，但它让我坚持了一段时间，所以我想我会把它贴在这里。

我没有安装 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"是，表单或表单块的 HTML 值将阻止浏览器执行该方法.autocomplete()，但不会阻止 jQuery UI 功能。

于 2019-05-30T21:44:12.633 回答
3

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

于 2016-04-27T09:50:57.117 回答
2

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

于 2019-12-23T10:15:19.433 回答
2

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

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

在你的情况下：

$(document).ready(function(){
   $(function(){
      $( "#searcharea" ).autocomplete({
         source: "suggestions.php"
      });
      $( "#searchcat" ).autocomplete({
         source: "suggestions1.php"
      });
   });
});
于 2017-04-14T12:09:53.057 回答
1

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

于 2014-08-04T17:38:10.130 回答
0

我在 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 lib 方面，我看到了 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 相对的自动完成功能。

干杯。

于 2018-05-16T11:58:52.477 回答
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) { }

            }
        })
于 2017-06-21T15:01:44.537 回答
0

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

@section Scripts 
{ 
   <script src="~/Scripts/jquery-ui.js" type="text/javascript"></script>
}
于 2018-06-08T01:55:42.940 回答
0

检查浏览器检查工具中的 Sources-> Scripts。有时可以引用多个 jQuery 文件。在 ASP.NET MVC 中，这通常发生在布局页面已经有 jQuery 引用时。

于 2019-10-04T02:18:56.533 回答
0

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

$( "#searcharea" ).keyup(function(){
   $( "#searcharea" ).autocomplete({
      source: "suggestions.php"
   });
});
于 2018-07-16T10:57:06.697 回答
0

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

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

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
于 2019-03-09T10:46:17.750 回答
-1 

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

于 2017-02-28T07:21:33.437 回答
-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>

于 2016-04-02T05:17:25.440 回答