使用 jQuery UI 获取“类型错误：$(...).autocomplete is not a function”错误
Posted
技术标签:
【中文标题】使用 jQuery UI 获取“类型错误：$(...).autocomplete is not a function”错误【英文标题】：getting " Type Error : $(...).autocomplete is not a function" error using jQuery UI 【发布时间】：2021-01-08 18:20:24 【问题描述】：我陷入了一个 jQuery ui 问题。我已经完成了一个表单，我需要根据客户 ID 自动完成所有字段。就像我输入现有客户的 id 一样，所有字段都应该自动填充数据库表中的所有客户值，例如 fisrtname、姓氏、地址、出生日期，但首先我是只是试图测试 jquery Ui 是否正常工作，我在控制台中收到“$(...).autocomplete is not a function”错误。它不是来自 Jquery，因为我也做了一个通知系统，我用 Jquery 播放所有通知并且它正在工作，我认为它来自 jQuery UI。我已经尝试了所有可能的解决方案，但没有成功。提前致谢 ！祝大家有美好的一天！ :)
这是我的 layouts.app
<!doctype html>
<html lang=" str_replace('_', '-', app()->getLocale()) ">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- CSRF Token -->
<meta name="csrf-token" content=" csrf_token() ">
<meta name="userId" content="Auth::check() ? Auth::user()->id : '' ">
<!-- Scripts -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="asset('jqueryui/jquery-ui.min.js')" type="text/javascript"></script>
<script>
window.Laravel = !! json_encode([
'csrfToken' => csrf_token(),
]); !!
</script>
<!-- Fonts -->
-- <link rel="dns-prefetch" href="//fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css?family=Nunito" rel="stylesheet"> --
<!-- Styles -->
<link rel="stylesheet" type="text/css" href="asset('jqueryui/jquery-ui.min.css')">
<link rel="icon" type="image/png" sizes="16x16" href="asset('assets/images/favicon.png')">
<title>S.C. Amanet Stefany IFN S.R.L.</title>
<!-- Bootstrap Core CSS -->
<link href="asset('assets/plugins/bootstrap/css/bootstrap.min.css')" rel="stylesheet">
<!-- morris CSS -->
<link href="asset('assets/plugins/morrisjs/morris.css')" rel="stylesheet">
<!-- Custom CSS -->
<link href="asset('css/style.css')" rel="stylesheet">
<!-- You can change the theme colors from here -->
<link href="asset('css/colors/blue.css')" id="theme" rel="stylesheet">
-- <link href=" asset('css/app.css') " rel="stylesheet"> --
</head>
<body>
.... this is my content ....
<!-- Scripts -->
<script src=" asset('js/app.js') " defer></script>
<script src=" asset('js/app.js') "></script>
-- <script src="asset('assets/plugins/jquery/jquery.min.js')"></script> --
-- <script src="asset('js/jquery.js')"></script> --
<!-- Bootstrap tether Core JavaScript -->
<script src="asset('assets/plugins/bootstrap/js/popper.min.js')"></script>
<script src="asset('assets/plugins/bootstrap/js/bootstrap.min.js')"></script>
<!-- slimscrollbar scrollbar JavaScript -->
<script src="asset('js/jquery.slimscroll.js')"></script>
<!--Wave Effects -->
<script src="asset('js/waves.js')"></script>
<!--Menu sidebar -->
<script src="asset('js/sidebarmenu.js')"></script>
<!--stickey kit -->
<script src="asset('assets/plugins/sticky-kit-master/dist/sticky-kit.min.js')"></script>
<!--Custom JavaScript -->
-- <script src="asset('js/custom.js')"></script> --
<script src="asset('js/custom.min.js')"></script>
-- <script src="asset('js/jquery-ui.js')"></script> --
<!-- ============================================================== -->
<!-- This page plugins -->
<!-- ============================================================== -->
<!--sparkline JavaScript -->
<script src="asset('assets/plugins/sparkline/jquery.sparkline.min.js')"></script>
<!--morris JavaScript -->
<script src="asset('assets/plugins/raphael/raphael-min.js')"></script>
<script src="asset('assets/plugins/morrisjs/morris.min.js')"></script>
<!-- Chart JS -->
<script src="asset('js/dashboard1.js')"></script>
<!-- ============================================================== -->
<!-- Style switcher -->
<!-- ============================================================== -->
<script src="asset('assets/plugins/styleswitcher/jQuery.style.switcher.js')"></script>
</body>
</html>
这是我对该表格的看法
<div class="form-group row ml-1 mb-1">
<label for="example-text-input" class="col-3 col-form-label pt-0" style="min-width: 80px;">Serie B.I./C.I.:</label>
<div class="col-3 pl-0">
<input class="form-control input-height pl-1 pr-1" name="serie" type="text" value="" id="">
</div>
<div class="col-4 pl-0">
<input class="form-control input-height pl-1 pr-1" name="nr_id" type="text" value="" id="cltId" > //this #cltId ----------
</div>
</div>
这是我的资源/js/app.js 以及我需要的 jQuery 代码
$(document).ready(function()
$("#cltId").autocomplete(
source: [
'Apple',
'Banana',
'Orange',
]
);
);
有什么建议吗？我添加了一些我不应该添加的东西吗？我是否以错误的方式编写代码？我找不到错误，任何答案都会对我有很大帮助。
【问题讨论】：
你有 2x<script src=jquery - 第二个将覆盖第一个 (jquery-ui) 中的所有插件 - 话虽如此，你确实有两倍的 jquery-ui...
我评论了其他行，但它仍然无法正常工作
我会查看 HTML 源代码和控制台。确保所有库都正确加载并且没有干扰其他库。该错误表示 jQuery UI 未加载。
是的，我使用了更多来自 Jquery 的插件，这就是我尝试使用完整版 jQuery 和 jQuery UI 时的结果。那里有冲突
【参考方案1】：
终于解决了，我已经把app.js中的jQuery代码全部搬走了，我已经运行命令了
npm install jquery-ui --save-dev
我将它导入到 app.js 中，例如：
import $ from 'jquery';
window.$ = window.jQuery = $;
import 'jquery-ui/ui/widgets/autocomplete.js';
重要！请注意，结尾的 autocomplete.js 对我有用，因为它是我要使用的小部件，找出您想要的小部件并在导入 jquery 后将其导入那里：
Import 'jquery-ui/widgets/here is the widget that you want .js'
但在查看之前不要将 jquery 导入其他任何地方，例如布局或任何其他 js 文件，例如 bootstrap.js。
【讨论】：
以上是关于使用 jQuery UI 获取“类型错误：$(...).autocomplete is not a function”错误的主要内容，如果未能解决你的问题，请参考以下文章
jquery-ui.js:8056 未捕获类型错误：无法读取未定义的属性“左侧”
未捕获的类型错误：无法读取未定义的属性“ui”。选择croparea时出现JQuery JCrop问题