Description: A type ahead selection functions as a search filter; it allows the user to view the search results as the user is typing below the input field. The user must select an option or select multiple options from the list. For full documentation please visit https://select2.github.io/
508 Guidelines: A type ahead select uses the input field, which will follow the same guidelines as in the form elements section.
<div class="form-group" role="application">
<label for="js-states">Please select a state</label>
<select class="form-control typeahead-select" id="js-states" title="Press enter to browse through select options">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function() {
// we assign the width to 100% so that the parent element decides the width of the select such as in bootstrap
// otherwise the width of 100% is not assigned if the select is created when it's not visible
$(".typeahead-select").select2({width: '100%' });
});
</script>
<div class="form-group" role="application">
<label for="js-states">Please select a state</label>
<select class="form-control typeahead-select" id="js-states" title="Press enter to browse through select options">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function() {
$(".typeahead-select-fixed").each(function(){
var t = $(this);
var targetDiv = t.parent();
t.select2({
width: '100%',
dropdownParent: targetDiv,
closeOnSelect:false,
theme: "always-open"
}).on('select2:open',function(){
// prevents the auto focus of the always open listing
$(this).parent().find('.select2-search input').prop('focus',false);
}).on('select2:closing',function(){
// prevents the closure of the listing
return false;
}).on('change',function(){
// write the function you'd like to use here.
alert(t.val());
}).select2("open"); // opens the options automatically.
});
});
</script>
<div class="form-group">
<label for="js-states">State selection</label>
<div class="typeahead-select-ms-wrapper" role="application" >
<select class="form-control typeahead-select-ms" name="theNameOfYourInput" id="msSelect1" title="Press enter to browse through select options" data-selections-name="theNameOfYourInput">
<optgroup label="Alaskan/Hawaiian Time Zone">
<option value="AK">Alaska</option>
<option value="HI">Hawaii</option>
</optgroup>
<optgroup label="Pacific Time Zone">
<option value="CA">California</option>
<option value="NV">Nevada</option>
<option value="OR">Oregon</option>
<option value="WA">Washington</option>
</optgroup>
<optgroup label="Mountain Time Zone">
<option value="AZ">Arizona</option>
<option value="CO">Colorado</option>
<option value="ID">Idaho</option>
<option value="MT">Montana</option>
<option value="NE">Nebraska</option>
<option value="NM">New Mexico</option>
<option value="ND">North Dakota</option>
<option value="UT">Utah</option>
<option value="WY">Wyoming</option>
</optgroup>
<optgroup label="Central Time Zone">
<option value="AL">Alabama</option>
<option value="AR">Arkansas</option>
<option value="IL">Illinois</option>
<option value="IA">Iowa</option>
<option value="KS">Kansas</option>
<option value="KY">Kentucky</option>
<option value="LA">Louisiana</option>
<option value="MN">Minnesota</option>
<option value="MS">Mississippi</option>
<option value="MO">Missouri</option>
<option value="OK">Oklahoma</option>
<option value="SD">South Dakota</option>
<option value="TX">Texas</option>
<option value="TN">Tennessee</option>
<option value="WI">Wisconsin</option>
</optgroup>
<optgroup label="Eastern Time Zone">
<option value="CT">Connecticut</option>
<option value="DE">Delaware</option>
<option value="FL">Florida</option>
<option value="GA">Georgia</option>
<option value="IN">Indiana</option>
<option value="ME">Maine</option>
<option value="MD">Maryland</option>
<option value="MA">Massachusetts</option>
<option value="MI">Michigan</option>
<option value="NH">New Hampshire</option>
<option value="NJ">New Jersey</option>
<option value="NY">New York</option>
<option value="NC">North Carolina</option>
<option value="OH">Ohio</option>
<option value="PA">Pennsylvania</option>
<option value="RI">Rhode Island</option>
<option value="SC">South Carolina</option>
<option value="VT">Vermont</option>
<option value="VA">Virginia</option>
<option value="WV">West Virginia</option>
</optgroup>
</select>
<div class="typeahead-select-ms-selections">
<span class="placeholder">Please select an item</span>
<button type="button" class="typeahead-select-ms-toggle-button" title="Press enter to toggle selections list"><i class="fa fa-caret-down" aria-hidden="true"></i><i class="fa fa-caret-up" aria-hidden="true"></i></button>
<li class="typeahead-select-ms-selected media-list"></li>
</div>
</div>
</div>
<script src="js/select2.full.js"></script>
<script>
$(document).ready(function(){
// multiple selection
$(".typeahead-select-ms").each(function(){
var
t = $(this),
targetDiv = t.parent(),
selectionsDiv = targetDiv.find('.typeahead-select-ms-selections'),
toggleButton = selectionsDiv.find('.typeahead-select-ms-toggle-button'),
targetSelected = selectionsDiv.find('.typeahead-select-ms-selected'),
selectionsName = t.data('selections-name'),
messages = {
removal:'<span class="sr-only">Press enter to remove </span>[v]<span class="sr-only"> from the selected items</span> <i class="fa fa-times"></i>',
},
createSelection = function(label, val){
var li = $(document.createElement('li')). //create the selected items
html('<span class="sr-only">'+label+'</span>').
append('<input type="hidden" name="'+selectionsName+'" value="'+val+'" />').
append(
$(document.createElement('button')).attr({
type:'button'
}).
attr({
'data-selected-value':val,
'class':'btn btn-default btn-sm'
}).
html(messages.removal.replace('[v]',label)).
click(function(){
// here you define the click function for selection removal.
var
th = $(this),
list = th.parent().parent(),
sv = th.data('selected-value'),
mainList = th.parent().parent().parent().parent(),
mainSelect = mainList.find('select')
;
th.focus(function(){
selectionsDiv.addClass('active');
}).blur(function(){
selectionsDiv.removeClass('active');
});
selectionsDiv.find('button').not(th).focus();
th.parent().remove();
mainSelect.find('option[value='+sv+']').removeAttr('disabled');
mainSelect.select2(msArgs);
if(list.children().length==0){
list.parent().find('.placeholder').show();
}
})
)
;
targetSelected.append(li);
},
toggleSelect = function(){
if (!t.data('open')){
t.select2('open');
toggleButton.addClass('open');
selectionsDiv.addClass('active');
} else {
t.select2('close');
toggleButton.removeClass('open');
}
},
msArgs = {
width: '100%',
dropdownParent: targetDiv,
theme: "ms"
};
// select it's closed, so let's set it's data flag to closed
t.data('open',false);
// function for the toggling of the options dropdown
// the actual button (needed for 508)
toggleButton.click(function(){
toggleSelect();
}).focus(function(){
selectionsDiv.addClass('active');
}).blur(function(){
selectionsDiv.removeClass('active');
});
// the whole box minus the buttons inside (toggle and selections)
selectionsDiv.click(function(e){
if (e.target.tagName!=='BUTTON'){
toggleSelect();
}
});
// initialize select2
t.select2(msArgs).on('select2:open',function(){
var t = $(this);
// set the open flag
t.data('open',true);
// remove mousedown event that closes select.
$(document.body).off('mousedown.select2.select2-' + t.attr('id'));
}).on('select2:close',function(){
toggleButton.focus().removeClass('open');
// set the flag
$(this).data('open',false);
}).on('select2:select',function(){
var
t = $(this),
p = t.parent(),
val = t.val(),
optionSelected = t.find('option[value="'+val+'"]'),
label = optionSelected.text();
// fo create the selection button
createSelection(label,val);
//disable option within list
optionSelected.attr('disabled','disabled');
//reinitialize select2
t.select2('close').select2(msArgs);
//re-focus dropdown toggle button
p.find('.typeahead-select-ms-toggle-button').focus().removeClass('open');
// hide the placeholder (cause you've selected something)
p.find('.placeholder').hide();
});
});
});
</script>