Select2 plugin

by Ritesh Pandey

HTML

<script src="//cdn.jsdelivr.net/select2/3.4.8/select2.min.js"></script>
<link rel="stylesheet" href="http://cdn.jsdelivr.net/select2/3.4.8/select2.css">
<!-- Playing with Select2 plugin -->
<form id="testForm">
<div class="my-select-wrap">
    <select id="select2" 
    multiple="multiple" 
    name="myselect[]" 
    data-placeholder="Select any one"
    class="my-select">
        <option value="one" selected>One</option>
        <option value="two" selected>Two</option>
        <option value="three">Three</option>
</select>
</div>
</form>
<input type="button" id="myBtn" value="Get Data" />

<div id="result"></div>

CSS

.my-select-wrap{
    margin: 0 0 5px 0;
}
.my-select{
    width: 300px;
}

JavaScript

$(function () {
    $("#select2").select2({
        minimumInputLength: 2
    })
    
    $("#select2").on("select2-focus", function () {
        console.log("select2-focus");
        console.log(this, arguments);
        var jSel = $(this),
            jCont = jSel.select2("container"),
            jContInp = jCont.find(".select2-input"),
            optionList = jSel.find(":selected"),
            optionListString = "";
        optionList.each(function () {
            optionListString += this.outerHTML;
        });
        console.log("optionListString");
        console.log(optionListString);
        jContInp.off("keyup", getSuggestion)
        .on("keyup", function () {
            var suggestions = getSuggestion(),
                data = suggestions.data,
                i;
            console.log("data", data);
            console.log("keyup", arguments);
            for (i=0; i<data.length; i++) {
                optionListString += "<option value="+data[i]["id"] + ">"+data[i]["text"] + "</option>";
            }
            jSel.html(optionListString);
        });
    }).on("select2-blur", function () {
        var jSel = $(this);
        jSel.off("keyup", getSuggestion);
    }).on("select2-selecting", function () {
        console.log("selecting", this);
        console.log("selecting", arguments);
    }).on("select2-removing", function () {
        console.log("removing", this);
        console.log("removing", arguments);
    });
    
    $("#myBtn").click(function () {
        var serialize = $("#testForm").serialize();
        $("#select2").append("<option value='four'>Four</option>");
        $("#result").text(serialize);
        console.log($("select2").select2("data"));
    });
});
    
    function getSuggestion() {
        //do ajax request
        return {
            data: [{id: "five", text: "Five"},{id: "six", text: "Six"}]
        }
    }