Jquery UI 和 Bootstrap JS 冲突使自动完成停止工作

Posted 2023-05-08

【中文标题】Jquery UI 和 Bootstrap JS 冲突使自动完成停止工作

【英文标题】：Jquery UI and Bootstrap JS conflicting making Autocomplete stop working

【发布时间】：2018-05-29 22:19:54

【问题描述】：

我正在尝试在搜索表单中实现自动完成功能。一切都按预期工作，但前提是我禁用引导 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 时，该错误完全消失，但我需要将它包含在网站上的单独功能中。

【参考方案1】：

我认为添加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>