Question

我使用的是select2版本4.0.3自动完成功能。我使用ajax post方法在select2上加载JSON。它显示了选择选项的数据，但我无法选择该选项。如果有人知道请给我解决方案。谢谢你

＆＃13;

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
</head>

<body>
    <div class="container-fluid">
        <div class="row">
            <p>
                <select class="js-example-basic-single js-states form-control"></select>
            </p>
        </div>
    </div>
</body>
<script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha256-ZosEbRLbNQzLpnKIkEdrPv7lOy9C27hHQ+Xp8a4MxAQ=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<script>
    $(function() {
        $('.js-example-basic-single').select2({
            placeholder: "Select a state",
            minimumInputLength: 3,
            ajax: {
                url: 'url',
                type: "POST",
                quietMillis: 50,
                data: function(term) {
                    console.log(term.term)
                    return {
                        mobile: term.term
                    };
                },
                processResults: function(data, params) {
                    //ajax response data
                    var data = {
                        "results": [{
                            "userID": 1,
                            "mobile": "9500494896",
                            "name": "Prabhu"
                        }, {
                            "userID": 16,
                            "mobile": "9500494849",
                            "name": "Prakash"
                        }]
                    };
                    console.log(data);
                    //var data = {results: []}; 	
                    return {
                        results: data.results
                    };
                },
                cache: true
            },
            escapeMarkup: function(markup) {
                return markup;
            },
            templateResult: formatRepo,
            templateSelection: formatRepoSelection
        });
    })
    //http://localhost:8080/vclean/admin/index.cfm?action=ajax.ordersearch
    function formatRepo(repo) {
        console.log(repo);
        if (repo.loading) return repo.text;

        var markup = "<div class='select2-result-repository clearfix'>" +
            "<div class='select2-result-repository__meta'>" +
            "<div class='select2-result-repository__title'>" + repo.name + "</div>";

        if (repo.mobile) {
            markup += "<div class='select2-result-repository__description'>" + repo.mobile + "</div>";
        }

        markup += "</div>";

        return markup;
    }

    function formatRepoSelection(repo) {
        console.log(repo);
        return repo.mobile || repo.text;
    }
</script>

</html>

＆＃13;

Answer 1

我遇到了同样的问题并解决了。主要问题是select2没有获得ajax.googleapis cdn。因此，在jQuery代码之前，我已经加载了CDN，现在可以正常工作了。首先，代码是

<script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

问题看起来像下面的图片

现在解决问题后，代码如下所示

<script src="https://code.jquery.com/jquery-3.4.1.js" integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU=" crossorigin="anonymous"></script>
  <script>
    $(document).ready(function() {
        $('.js-example-basic-multiple').select2();
    });
</script>

现在如下所示

无法在select2版本4.0.3 ajax方法上选择该选项

1 个答案: