Select2 Demo

Bootstrap 3.1.1 Select2 3.4.8

by James

HTML

<link rel="stylesheet" href="http://ivaynberg.github.io/select2/select2-3.4.8/select2.css">
<script src="http://ivaynberg.github.io/select2/select2-3.4.8/select2.js"></script>
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.min.css">
<div id="topdiv">
    <div id="thebutton">FOCUS INPUT</div>
    <p class="pull-left" style="margin-top: 110px;">this is just some filler content...</p>
</div>
<form>
    <div class="add-tag">
        <div class="wrapper">
            <div class="inner">
                <div style="margin-bottom: 5px;">
                    <div class="subhead">subhead</div>
                    <button type="button" class="btn btn-xs btn-success">save</button>
                    <button type="button" class="btn btn-xs btn-default">cancel</button>
                </div>
                <div class="add-text">blah blah blah</div>
                <input type='hidden' value="192" data-init-text='Bla bla' name='input' id='test' class="typeahead" style="width:680px;" />
            </div>
        </div>
    </div>
</form>
<div class="main-footer">fixed footer</div>

CSS

#topdiv {
    background-color: #ccc;
    float: left;
    width: 100%;
    height: 500px;
}
.add-tag {
    background-color: #FFFFE0;
    border: 1px solid #C0C0C0;
    padding: 5px;
    min-height: 200px;
    margin-bottom: 50px;
}
.typeahead{
    font-size: 13px;
    line-height: 1.428571429;
    padding-left: 0;
    width: 100%;
}
#thebutton {
    border: 1px solid #C0C0C0;
    color: #777;
    cursor: pointer;
    float: left;
    font-size: 12px;
    height: 45px;
    margin: 10px 5px -10px 0;
    padding-top: 7px;
    text-align: center;
    text-shadow: none;
    width: 52px;
    border-radius: 50px;
    background-color: #fff;
}
#thebutton:hover {
    background-color: #E4CDCD;
    border: 1px solid #EE9D9D;
}
.main-footer {
    opacity: 0.9;
    z-index: 1;
    padding: 5px 20px;
    position: fixed;
    bottom: 0;
    color: #F5F5F5;
    background-color: #222;
    width: 2000px;
    overflow-x: hidden;
}
.add-text {
    padding-left: 20px;
    padding-right: 15px;
    margin-top: 5px;
    margin-bottom: 10px;
}
.wrapper {
    margin: 2% 3%;
}
form {
    padding: 0 0 2% 0;
}
.inner {
    margin-top: 20px;
    border-bottom: none;
    padding-bottom: 10px;
    margin-bottom: 10px;
    margin-right: 10px;
    margin-left: 0px;
    color: #888;
}
.subhead {
    display: inline-block;
    font-weight: bold;
    margin-right: 10px;
}

JavaScript

//select2 v3.4.8
//bootstrap 3.1.1

$(document).ready(function () {
    $('#test').select2({
        minimumInputLength: 1,
        multiple: true,
        allowClear: true,
        formatInputTooShort: function (input, min) {
            var n = min - input.length;
            return "Please enter " + n + " more character. ";
        },
        placeholder: 'Search',
        ajax: {
            url: "http://www.weighttraining.com/sm/search",
            dataType: 'jsonp',
            quietMillis: 500,
            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;
        }
    });

    //focus the input on click of the button    
    $("#thebutton").click(function () {
        $(".select2-container-multi input").click();
    });


});