Select2 Demo

by alekskorovin

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.js"></script>
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/select2/3.5.2/select2.min.css">
<input id="autosuggest" name="autosuggest" type="text" />

CSS

input, .select2-container {
    width: 100%;
}

JavaScript

var data = [
    {
        id: 1,
        text: 'Alabama'
    },
    {
        id: 2,
        text: 'Alaska'
    }
];

$("#autosuggest").select2({
    allowClear: false,
    minimumResultsForSearch: 0,
    data: function() { return { results: data }; },
    selectOnBlur: true,
    createSearchChoice: function (term, data) {
        if ($(data).filter(function () {
            return this.text.localeCompare(term) === 0;
        }).length === 0) {
            return {
                id: term,
                text: term
            };
        }
    }
}).on('select2-clearing', function(e) {
    e.preventDefault();
}).on('select2-blur', function(e) {
    e.preventDefault();
});