使用 jQuery UI 获取" Type Error : $(...).autocomplete is not a function"错误

我被锁定在一个jQuery ui问题中。我已经完成了一个表单，我需要根据客户端id自动填写所有字段。这就像如果我输入现有客户端的id，所有字段都应该自动填充数据库表中的所有客户端值，如名字、姓氏、地址、出生日期，但第一次我只是试着测试jquery Ui是否有效$(…(.自动完成不是一个函数"；控制台中出现错误。它不是来自Jquery，因为我还做了一个通知系统，我用Jquery处理了所有通知，它正在工作，我认为它来自Jquery UI。我尝试了所有可能的解决方案，但都没有成功。提前感谢！祝大家愉快！：(

这是我的布局.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',
]
});
});

有什么建议吗？我添加了不该添加的内容吗？我把代码写错了吗？我找不到错误，任何答案都会对我有很大帮助。

终于解决了，我已经移动了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导入到其他任何地方，例如布局或bootstrap.js等任何其他js文件。

相关内容

最新更新

热门标签：