Jquery UI和Bootstrap JS冲突使Autocomplete停止工作

Posted 2021-03-31

我试图在搜索表单中实现自动完成功能。一切都按预期工作，但只有我禁用bootstrap JS。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>
<script src="{{ asset('js/app.js') }}"></script>

<!--html Here-->

<script>
    $( function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "javascript",
            "Lisp",
            "Perl",
            "php",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#accountInput" ).autocomplete({
            source: availableTags
        });
    } );
</script>

我正在使用laravel，app.js文件是加载引导程序的地方。当我以这种方式运行代码时，我得到了这个：

Uncaught TypeError: $(...).autocomplete is not a function

当我不包含bootstrap的JS时，错误就完全消失了，但我需要将它包含在网站上的单独功能中。

答案

我认为添加你的js文件的顺序会导致这个问题。您可以将此订单更改为以下并再次测试。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<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>

<script>
    $( function() {
        var availableTags = [
            "ActionScript",
            "AppleScript",
            "Asp",
            "BASIC",
            "C",
            "C++",
            "Clojure",
            "COBOL",
            "ColdFusion",
            "Erlang",
            "Fortran",
            "Groovy",
            "Haskell",
            "Java",
            "JavaScript",
            "Lisp",
            "Perl",
            "PHP",
            "Python",
            "Ruby",
            "Scala",
            "Scheme"
        ];
        $( "#accountInput" ).autocomplete({
            source: availableTags
        });
    } );
</script>

<script src="{{ asset('js/app.js') }}"></script>