JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://select2.github.io/select2/select2-3.5.2/select2.css">
<script src="http://select2.github.io/select2/select2-3.5.2/select2.js"></script>
<input id="id_test_name" class="form-control">

JavaScript

$("#id_test_name").select2({
                placeholder: "Search for an Item",
                minimumInputLength: 2,
                ajax: {
                    url: "http://jsonplaceholder.typicode.com/users/",
                    dataType: 'json',
                    quietMillis: 100,
                    data: function (term, page) {
                        return {
                            _: term
                        };
                    },
                    results: function (data, page) {
                        return {
                            results: $.map(data, function (item) {
                                return {
                                    name: item.name,
                                    abbreviation: item.username
                                }
                            })
                        };
                    }
                },
                formatResult: function (data, term) {
                    return '<div>' +  data.name + '(' +  data.username +')' + '</div>';
                },
                formatSelection: function (data) {
                    return data.name;
                },
                dropdownCssClass: "bigdrop",
                escapeMarkup: function (m) {
                    return m;
                }
            });