Select2 choosing all options from filtered list for multiple selection

Using the select2 plugin for jQuery on my select dropdown allows me to type and find partial matches quickly. However if I wanted to grab all partial matches I'd have to click one, type the filter again, click the next, etc. It gets tedious quickly. Instead what I'd like to do is type the first few characters then select all of the FILTERED options.

For example, if I had a list of every state in the US and I typed "New" I would see "New Hampshire, New Jersey, New Mexico, New York". I'd like a way to select all 4 without having to click each one.

Here's a jsfiddle example: https://jsfiddle.net/myingling/xv7bzqek/4/

<select name='state' id='state' multiple='multiple'>
                    <option value='null'> - Please Select - </option>
                    <option value='AL'>Alabama</option>
                    <option value='AK'>Alaska</option>
                    <option value='AZ'>Arizona</option>
                    <option value='AR'>Arkansas</option>
                    <option value='CA'>California</option>
                    <option value='CO'>Colorado</option>
                    <option value='CT'>Connecticut</option>
                    <option value='DE'>Delaware</option>
                    <option value='DC'>District Of Columbia</option>
                    <option value='FL'>Florida</option>
                    <option value='GA'>Georgia</option>
                    <option value='HI'>Hawaii</option>
                    <option value='ID'>Idaho</option>
                    <option value='IL'>Illinois</option>
                    <option value='IN'>Indiana</option>
                    <option value='IA'>Iowa</option>
                    <option value='KS'>Kansas</option>
                    <option value='KY'>Kentucky</option>
                    <option value='LA'>Louisiana</option>
                    <option value='ME'>Maine</option>
                    <option value='MD'>Maryland</option>
                    <option value='MA'>Massachusetts</option>
                    <option value='MI'>Michigan</option>
                    <option value='MN'>Minnesota</option>
                    <option value='MS'>Mississippi</option>
                    <option value='MO'>Missouri</option>
                    <option value='MT'>Montana</option>
                    <option value='NE'>Nebraska</option>
                    <option value='NV'>Nevada</option>
                    <option value='NH'>New Hampshire</option>
                    <option value='NJ'>New Jersey</option>
                    <option value='NM'>New Mexico</option>
                    <option value='NY'>New York</option>
                    <option value='NC'>North Carolina</option>
                    <option value='ND'>North Dakota</option>
                    <option value='OH'>Ohio</option>
                    <option value='OK'>Oklahoma</option>
                    <option value='OR'>Oregon</option>
                    <option value='PA'>Pennsylvania</option>
                    <option value='PR'>Puerto Rico</option>
                    <option value='RI'>Rhode Island</option>
                    <option value='SC'>South Carolina</option>
                    <option value='SD'>South Dakota</option>
                    <option value='TN'>Tennessee</option>
                    <option value='TX'>Texas</option>
                    <option value='UT'>Utah</option>
                    <option value='VT'>Vermont</option>
                    <option value='VA'>Virginia</option>
                    <option value='WA'>Washington</option>
                    <option value='WV'>West Virginia</option>
                    <option value='WI'>Wisconsin</option>
                    <option value='WY'>Wyoming</option>
</select>
<input type='button' id='all_visible' value='Select Visible' />
<script>
    jQuery('#state').select2();

    jQuery('#all_visible').click(function() {
         var visible = null; // TODO: how do we grab the filtered list?
         jQuery('#state').val(visible).trigger('change');
    });
</script>

Is there a way to do this? The select2 documentation shows how to programatically select a SINGLE option, but not en-mass from their own filtered list. There are plenty of other answers out there for selecting ALL options, but that would include the ones which are hidden by the filter (ex: California).

Sample mock:

I have tried getting the filtered visible values from the select dropdown. select2 plugin stores all the plugin data in the data() object. Here you can the results from $("#select").data().

All you have to do is iterate over the filtered result elements (li tag) in the data object and trigger mouseup event for all those results elements.

Try below working example.

<html>

<head>
   
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  
    
    <script type="text/javascript"
        src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/js/select2.min.js"></script>
    <link rel="stylesheet" type="text/css"
        href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.10/css/select2.min.css">

    <style id="compiled-css" type="text/css">

    </style>

    <script>
        $(document).ready(function() {
            $('#state').select2();
            
            $('#all_visible').click(function(event) {
            event.preventDefault();
            var visible = null; // TODO: how do we grab the filtered list?
             //   $('#state').val(visible).trigger('change');

                // Get the data object of state dropdown
                var filteredValues = [];
                var select2Holder = $('#state').data(); 

                if (select2Holder && select2Holder.select2) {
                    // Find the $results object
                    var results = select2Holder.select2.$results;
                    if (results) {
                      //  var resultNode$ = $(results[0]);
                      //  console.log(resultNode$);
                        
                        if ($(results[0]) && $(results[0]).children().length > 0) {
                            $(results[0]).children().each(function(index, node) {
                               
                                var selectedValue;
                                // Get the option value from attribute
                                var id = $(node).attr('id');
                                // id attribute will be like this 'select2-state-result-x3b0-NH'
                                // split the id attribute using "-" and get last value
                                var arr  = id.split('-');
                                if (arr && arr.length > 0) {
                                  selectedValue = arr[arr.length -1 ];
                                  filteredValues.push(selectedValue);
                                }

                                $(node).trigger('mouseup');
                              
                            })
                          
                        }
                        
                    }

                }
            });
        })
    </script>

  
</head>

<body >
    <select name='state' id='state' multiple='multiple'>
        <option value='null'> - Please Select - </option>
        <option value='AL'>Alabama</option>
        <option value='AK'>Alaska</option>
        <option value='AZ'>Arizona</option>
        <option value='AR'>Arkansas</option>
        <option value='CA'>California</option>
        <option value='CO'>Colorado</option>
        <option value='CT'>Connecticut</option>
        <option value='DE'>Delaware</option>
        <option value='DC'>District Of Columbia</option>
        <option value='FL'>Florida</option>
        <option value='GA'>Georgia</option>
        <option value='HI'>Hawaii</option>
        <option value='ID'>Idaho</option>
        <option value='IL'>Illinois</option>
        <option value='IN'>Indiana</option>
        <option value='IA'>Iowa</option>
        <option value='KS'>Kansas</option>
        <option value='KY'>Kentucky</option>
        <option value='LA'>Louisiana</option>
        <option value='ME'>Maine</option>
        <option value='MD'>Maryland</option>
        <option value='MA'>Massachusetts</option>
        <option value='MI'>Michigan</option>
        <option value='MN'>Minnesota</option>
        <option value='MS'>Mississippi</option>
        <option value='MO'>Missouri</option>
        <option value='MT'>Montana</option>
        <option value='NE'>Nebraska</option>
        <option value='NV'>Nevada</option>
        <option value='NH'>New Hampshire</option>
        <option value='NJ'>New Jersey</option>
        <option value='NM'>New Mexico</option>
        <option value='NY'>New York</option>
        <option value='NC'>North Carolina</option>
        <option value='ND'>North Dakota</option>
        <option value='OH'>Ohio</option>
        <option value='OK'>Oklahoma</option>
        <option value='OR'>Oregon</option>
        <option value='PA'>Pennsylvania</option>
        <option value='PR'>Puerto Rico</option>
        <option value='RI'>Rhode Island</option>
        <option value='SC'>South Carolina</option>
        <option value='SD'>South Dakota</option>
        <option value='TN'>Tennessee</option>
        <option value='TX'>Texas</option>
        <option value='UT'>Utah</option>
        <option value='VT'>Vermont</option>
        <option value='VA'>Virginia</option>
        <option value='WA'>Washington</option>
        <option value='WV'>West Virginia</option>
        <option value='WI'>Wisconsin</option>
        <option value='WY'>Wyoming</option>
</select>
<input type='button' id='all_visible' value='Select Visible' />
</body>

</html>

Select2 choosing all options from filtered list for multiple selection

1 Answers