Select2 Remote Data Select Example

Select2 remote data select example www.BryteStudio.com

HTML

<link rel="stylesheet" href="http://select2.github.io/select2/select2-3.5.1/select2.css">
<script src="http://select2.github.io/select2/select2-3.5.1/select2.js"></script>
<body>Remote Data Example:
    <div class="selectRow">
        <!-- Using data-placeholder below to set place holder value. -->
        <input type="hidden" id="remoteDataExample" name='input' />
    </div>
</body>

CSS

.selectRow {
    display : block;
    padding : 20px;
}
.select2-container {
    width: 200px;
}

JavaScript

$(document).ready(

function () {
    var searchTerm = null;
    // Remote data example
    var remoteDataConfig = {
        placeholder: "Search for an option...",
        minimumInputLength: 3,
        ajax: {
            url: '/echo/json/',
            dataType: 'json',
            data: function (term, page) {
                // Nothing sent to server side. Mock example setup.
                searchTerm = term.toUpperCase();
            },
            results: function (data, page) {
                // Normally server side logic would parse your JSON string from your data returned above then return results here that match your search term. In this case just returning 2 mock options.
                return {
                    results: getMockData()
                };
            }
        },
        formatResult: function (option) {
            return "<div>" + option.desc + "</div>";
        },
        formatSelection: function (option) {
            return option.desc;
        }
    };

    function getMockData() {
        var mockData = [{
            id: 1,
            text: 'Option 1'
        }, {
            id: 1,
            text: 'Option 2'
        }];
        var foundOptions = [];

        for (var key in mockData) {
            if (mockData[key].desc.toUpperCase().indexOf(searchTerm) >= 0) {
                foundOptions.push(mockData[key]);
            }
        }

        return foundOptions;
    };

    $("#remoteDataExample").select2(remoteDataConfig);
});