Can't select the option on select2 version 4.0.3 ajax method

Question

I am using select2 version 4.0.3 autocomplete. I'm used the ajax post method for load the JSON on select2. It is shows the data on select option but i can't select that one option. If anyone knows give me the solution please. Thanking you

<!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>

I've had a hard time understanding your code, but from your question I believe this might help you: https://stackoverflow.com/questions/19639951/how-do-i-change-selected-value-of-select2-dropdown-with-jqgrid — J. S., Jul 21 '17 at 23:59
@JoãoSoares that answer is not for my question. I tried to load the Json data on select2 from remote. Ajax post method returns the correct output and select2 load the json data successfully but I can't select the value on that drop down. — cfprabhu, Jul 29 '17 at 16:02

Ziaur Rahman · Answer 1 · 2019-11-06T20:43:42.860

I have faced the same problem and solved it. Main problem was select2 doesn't get ajax.googleapis cdn. So, before the jQuery code I have loaded the cdn and it works fine now. Firstly, the code was

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

The problem is looked like the picture below

Now after solving the problem the code looks like below

<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>

Now it is seen like below

Can't select the option on select2 version 4.0.3 ajax method

1 Answers1