Select2 Demo - AJAX Search

by bizamajig

HTML

<link rel="stylesheet" href="http://ecos.fws.gov/js/bootstrap-2.0.3/css/bootstrap.css">
<script src="http://ivaynberg.github.com/select2/select2-master/select2.js"></script>
<link rel="stylesheet" href="http://ivaynberg.github.com/select2/select2-master/select2.css">
<input type='hidden' value="192" data-init-text='Bla bla' name='input' id='test' style="width:300px;"/>

JavaScript

$(document).ready(function() {
    $('#test').select2({
        minimumInputLength: 3,
        placeholder: 'Search',
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 100,
            data: function(term, page) {
                return {
                    types: ["exercise"],
                    limit: -1,
                    term: term
                };
            },
            results: function(data, page ) {
                return { results: data.results.exercise }
            }
        },
        formatResult: function(exercise) { 
            return "<div class='select2-user-result'>" + exercise.term + "</div>"; 
        },
        formatSelection: function(exercise) { 
            return exercise.term; 
        },
        initSelection : function (element, callback) {
            var elementText = $(element).attr('data-init-text');
            callback({"term":elementText});
        }
    });
});