Multiple Selection with jQuery Select2 Plug-in using JSON Array Data

jQuery Select2 changes the way we do multiple selections using a dropdown list. However, in this post, I’ll use an <input> box of type text and show you how the Select2 will bind JSON data to the <input> box and convert it into a multiple selection dropdown list.

Multiple Section using jQuery Select2 with JSON Data

Before you start working on you application, you must first Download Select2 and save in a folder in your computer. It’s a ZIP file, which will have a .js and .css file. You will need to include these files in your webpage, inside the <head> tag.

The Code

In the markup section, I have added the Select2 library and CSS files inside the <head> tag. I have also added an <input> box of type text inside the <body> tag. The textbox has an id called Books. The Select2 will bind the input box using its id.

<!DOCTYPE html>
<html>
<head>
    <title>jQuery Select2 Example with JSON Array</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>

    <script src="https://cdn.bootcss.com/select2/3.4.5/select2.min.js"></script>
    <link href="https://cdn.bootcss.com/select2/3.4.5/select2.min.css" rel="stylesheet"/>
</head>
<body>
    <input type="text" id='Books' value="" style="width:300px;" />
    
    <input type="button" id="bt" value="Submit" style="margin-left:10px;" />
    <p>
        <label id="lbl"></label>
    </p>
</body>

<script>
    $(document).ready(function () {
        var empArray =
            [{ id: '001', text: 'Alpha' },
                { id: '002', text: 'Bravo' },
                { id: '003', text: 'Charlie' },
                { id: '004', text: 'Delta' },
                { id: '005', text: 'Echo'}];

        $("#Books").select2({
            data: empArray,
            multiple: true,
            placeholder: 'Select one or more values from the list'
        });

        // SHOW SELECTED VALUES.
        $('#bt').click(function () {
            $('#lbl').empty();
            $('#lbl').append("You have selected: <br />");
            var iCnt = 0;
            var data = $('#Books').select2('data');
            
            $.each(data, function () {
                var empName = $('#Books').select2('data')[iCnt]['text'] + '<br />';
                $('#lbl').append(empName);iCnt += 1;
            });
        });
    });
</script>
</html>

Try it

In the script, first I have declared a variable and assigned it with JSON data. Two values each, with Employee ID and Text for Employee names. Next, I have bind the <input> box with Select2 and assigned the JSON array data to it.

I have also explicitly set the multiple property as true. Else, it would allow us to select a single value. We need to select multiple values. The placeholder property specifies a short hint the describes what you should enter in the input box.

Using Select2 with minimumInputLength Property

When you set focus on the input box, it will automatically show you a dropdown list with the values, with infinite scrolls (if you have a huge list of data). This is its default behavior. However, you can set a Minimum Input length, before it shows any value in the dropdown, that is, you can force your uses to enter few letters before Select2 shows matching data in the dropdown list.

This property helps in filtering the data to avoid displaying every value extracted from the source, JSON or some database.

All you have to do is, add the minimumInputLength property with a value. For example,

$("#Books").select2({
    data: empArray,
    minimumInputLength: 2,
    multiple: true,
    placeholder: 'Select one or more values from the list'
});

I have set the minimumInputLength to 2. You now have to enter 2 letters in the input box and then it will show a list of values.

← PreviousNext →