.autocomplete不是函数错误

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

我的Html代码是

<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

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

$( "#searcharea" ).autocomplete({

My website link is: http://www.jodhpuryp.in/

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

This is source of my autosuggestion box http://api.jqueryui.com/autocomplete/

这是我自动提示盒的来源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

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

11 个解决方案

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

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

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

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

Edit: if you externalise your script, ensure it is referenced AFTER any JQuery libraries it relies on :)

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

#3

Note that if you're not using the full jquery UI library, this can be triggered if you're missing Widget, Menu, Position, or Core. There might be different dependencies depending on your version of jQuery UI

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

#4

For my case, my another team member included another version of jquery.js when he add in bootstrap.min.js. After remove the extra jquery.js, the problem is solved

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

#5

Loading jQuery library before Angularjs library helped me.

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

#6

You are calling the function before the page loads jQuery. It is always advisable to use jQuery inside $(document).ready(function(){ //Your code here })

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

In your case:

在你的情况下：

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

});

}）;

#7

My issue ended up being visual studio catching an unhandled exception and preventing the script from running any further. Because I was running in the IDE, it looked like there was an issue when there wasn't. Autocomplete was working just fine. I added a try/catch block and that made the IDE happy.

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

            }
        })

#8

I've got this error working in ASP.net. When I run the application from visual studio it worked all fine, but when I published the project and tested it , I've got that error "Autocomplete is not a function" in chrom Inspect debugger. I found out that the deferences between two environments were caused by a definition in web.config. in compilation tag. if assign debug="false" then all bundel definitions are executed and compilation is done as a release. if debug = true" then compilation is for a debug stage that not include bundeling and minifyning js library. Therefore the deferences between environments.

我在ASP.net中遇到此错误。当我从visual studio运行应用程序时它工作得很好，但是当我发布项目并测试它时，我在chrom Inspect调试器中得到了“Autocomplete不是函数”的错误。我发现两个环境之间的差异是由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>

In addition, examining those two environments I saw that for debug environment everywhere (_Layout.cshtml) @Scripts.Render("~/bundles/jquery") was in the code, where (under APP_Start) BundleConfig.cs
bundles.Add(new ScriptBundle("~/bundles/jquery").Include( "~/Static/js/lib/jquery-{version}.js", "~/Static/js/lib/jquery-ui.js"));

另外，检查那两个环境我看到的调试环境无处不在（_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”））;

it rended as:

它被渲染为：

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

and the other environment (debug = false)

和其他环境（debug = false）

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

In debug mode it works and the other one got the problem.

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

Aspecting the js lib I saw two files of jquery-ui:

看到js lib我看到了两个jquery-ui文件：

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

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

it turns out that both of them come as default from the template of new mvc project. When jquery-ui.min.js was deleted from the library the problem resolved.

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

I belive that even though jquery-ui.js was defined in BundleConfig.cs, actually jquery-ui.min.js was taken.

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

By the way, jquery-ui.min.js didn't include autocomple function apposed to jquery-ui.js that included it.

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

cheers.

干杯。

#9

If your page has a section for Scripts such as the following, then ensure you refer to your Jquery library from inside this section.

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

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

#10

when you see this problem always put your autocomplete function in keyup function and ensure you have added the libraries

当您看到此问题时，始终将自动完成功能置于键盘功能中并确保已添加库

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

#11

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

#1