使用jquery为多选添加自动完成答案

【问题标题】：Adding autocomplete for multiselct using jquery使用jquery为多选添加自动完成
【发布时间】：2021-05-11 17:01:13
【问题描述】：

我在此处添加了问题Checkbox is not getting displayed in dropdown 以添加多选下拉菜单。在这里，我使用了 mbootstarp，但我不想在这里获取包。所以我尝试添加多选下拉菜单通过点击此链接https://www.jqueryscript.net/form/jQuery-jQuery-UI-Plugin-For-Simle-Tokenized-Autocomplete-Autocomplete-Multiselect.html#google_vignette。

<html>
     <head>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
    <link href="http://getbootstrap.com/2.3.2/assets/css/bootstrap.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>

    <!--JS-->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js">
    </script>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <script src="http://jquery.autocomplete.multiselect.js"></script>
</head>
    <body>
    <input type="text" id="myautocomplete" />

<script type="text/javascript">
$("#myautocomplete").click(function(){
        /* Local Data */
        var carList = [
                "Audi S6", "Audi S6", "Austin-Healey", "Alfa Romeo", "Aston Martin",
                "BMW 7 ", "Bentley Mulsanne", "Bugatti Veyron",
                "Chevrolet Camaro", "Cadillac ",
                "Duesenberg J ", "Dodge Sprinter",
                "Elantra", "Excavator",
                "Ford Boss 302", "Ferrari 360", "Ford Thunderbird ",
                "GAZ Siber"];

        $('#myautocomplete').autocomplete({ source: carList, width: 205, multiselect:true});
})
</script>
</body>
</html>

添加此代码后，我可以看到下拉列表，我只能添加一个数据。我不能添加多个数据，也没有看到正确选择的数据。有人可以帮我吗？

【问题讨论】：

你不能在同一页面上包含多个版本的 jQuery 和 jQuery UI
如果您删除了指向 jQuery 库的错误链接，请编辑您的帖子并更新代码以反映当前脚本。
我编辑了你能帮帮我吗？

标签： javascript html jquery css

【解决方案1】：

如何使用 Jquery 进行多选和自动完成。

首先添加 Javascript：

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>

<script src="src/jquery.autocomplete.multiselect.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css"/>

添加 HTML：

&lt;input id="myAutocomplete" type="text" /&gt;

jQuery：

$(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"
];
$('#myAutocomplete').autocomplete({
source: availableTags,
multiselect: true
});
})

希望对您有所帮助。

【讨论】：

注：我用过我的参数（编程语言），大家可以根据需要使用。