jQuery .autocomplete 不是函数错误
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19591155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
.autocomplete is not a function Error
提问by user2454340
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
任何人都可以告诉我，为什么我在我网站的其他页面上在索引页面上工作时会出现此错误。感谢任何帮助。谢谢
回答by user2454340
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.
发现问题，我为我的 google 翻译器添加了另一个 jquery 文件，它们相互冲突并导致未加载自动完成功能。
回答by Krayg
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 库之后引用它:)
回答by BigTom
This is embarrassing but it held me up for a while so I figured I would post it here.
这很尴尬，但它让我犹豫了一段时间，所以我想我会把它贴在这里。
I did not have jQuery UI installed, only classic jQuery, which does not include autocomplete (apparently). Adding the following tags enabled autocomplete via jQuery UI.
我没有安装 jQuery UI，只有经典的 jQuery，它不包括自动完成（显然）。添加以下标签可通过 jQuery UI 启用自动完成。
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
and..
和..
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"</script>
Of note, the HTML value autocomplete="off"for either the form or form block will prevent the brower from performing the method .autocomplete(), but will not block the jQuery UI function.
值得注意的autocomplete="off"是，表单或表单块的 HTML 值将阻止浏览器执行方法.autocomplete()，但不会阻止 jQuery UI 功能。
回答by sky91
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后，问题解决
回答by Lotus
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 版本，可能存在不同的依赖项
回答by Vicky Vishal
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).ready(function(){ //Your code here })
In your case:
在你的情况下：
$(document).ready(function(){
$(function(){
$( "#searcharea" ).autocomplete({
source: "suggestions.php"
});
$( "#searchcat" ).autocomplete({
source: "suggestions1.php"
});
});
});
});
回答by Sue
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.
我的问题最终是 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) { }
}
})
回答by Zohar Chiprut
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 调试器中遇到了“自动完成不是功能”的错误。我发现两个环境之间的差异是由 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>
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.csbundles.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.csbundles.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)
和其他环境（调试=假）
<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.
干杯。
回答by bobcatBisto
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>
}
回答by Naveen Roy
when you see this problem always put your autocomplete function in keyup function and ensure you have added the libraries
当您看到此问题时，请始终将您的自动完成功能放在 keyup 功能中，并确保您已添加库
$( "#searcharea" ).keyup(function(){
$( "#searcharea" ).autocomplete({
source: "suggestions.php"
});
});
