Ajax Bootstrap Select

Extends existing [Bootstrap Select] implementations by adding the ability to search via AJAX requests as you type.

by Cristiano Oliveira

HTML

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/ajax-bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/ajax-bootstrap-select.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/css/bootstrap-select.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.3/js/bootstrap-select.min.js"></script>
<div class="container">
    <div class="row">
        <div class="col-xs-4">
            <h3>Without<br>Ajax-Bootstrap-Select</h3>
            <select id="selectpicker" class="selectpicker" data-live-search="true">
                <option value="[email protected]" data-subtext="[email protected]">Lacy</option>
                <option value="[email protected]" data-subtext="[email protected]">Chancellor</option>
                <option value="[email protected]" data-subtext="[email protected]">Conan</option>
                <option value="[email protected]" data-subtext="[email protected]">Igor</option>
                <option value="[email protected]" data-subtext="[email protected]">Mariam</option>
                <option value="[email protected]" data-subtext="[email protected]">Chancellor</option>
                <option value="[email protected]" data-subtext="[email protected]">Quyn</option>
                <option value="[email protected]" data-subtext="[email protected]">Lance</option>
                <option value="[email protected]" data-subtext="[email protected]">Scarlett</option>
                <option...

CSS

h3 {
            text-align: center;
        }

        .bootstrap-select {
            width: 100% !important;
        }

JavaScript

var options = {
        ajax          : {
            url     : 'https://stmsrv.com/services/ajax.php',
            type    : 'POST',
            dataType: 'json',
            // Use "{{{q}}}" as a placeholder and Ajax Bootstrap Select will
            // automatically replace it with the value of the search query.
            data    : {
                q: '{{{q}}}'
            }
        },
        locale        : {
            emptyTitle: 'Select and Begin Typing'
        },
        log           : 3,
        preprocessData: function (data) {
            var i, l = data.length, array = [];
            if (l) {
                for (i = 0; i < l; i++) {
                    array.push($.extend(true, data[i], {
                        text : data[i].Name,
                        value: data[i].Email,
                        data : {
                            subtext: data[i].Email
                        }
                    }));
                }
            }
            // You must always return a valid array when processing data. The
            // data argument passed is a clone and cannot be modified directly.
            return array;
        }
    };

    $('.selectpicker').selectpicker().filter('.with-ajax').ajaxSelectPicker(options);
    $('select').trigger('change');