Components
Select2 is a jQuery based replacement for select boxes. It supports searching, remote data sets, and infinite scrolling of results. Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
For more info please visit the plugin's Demo Page or Github Repo.
Select2 Examples
Pathfinder
Pathfinder
<!-- basic -->
<div class="form-group">
<label for="exampleFormControlInput1">Basic Example</label>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
<script>
$(document).ready(function() {
$(".js-example-basic-single").select2();
});
</script>
<!-- Multi Select Boxes-->
<div class="form-group">
<label for="exampleFormControlInput1">Multi Select Boxes</label>
<select class="js-example-basic-multiple" name="states[]" multiple="multiple">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
<option value="WY">Goku</option>
<option value="WY">Jane</option>
</select>
</div>
<script>
$(document).ready(function() {
$(".js-example-basic-multiple").select2();
});
</script>
<!-- Remote Data-->
<div class="form-group">
<label for="exampleFormControlInput1">Remote Data</label>
<select class="js-data-example-ajax"></select>
</div>
<script>
$(".js-data-example-ajax").select2({
dropdownParent: $(".main-content-body"),
ajax: {
url: "https://api.github.com/search/repositories",
dataType: "json",
processResults: function (data) {
var results = $.map(data.items, function (item) {
return {
text: item.name,
id: item.id
}
})
return {results: results}
}
}
});
</script>
<!-- Disabled-->
<div class="form-group">
<label for="exampleFormControlInput1">Basic Example</label>
<select class="js-example-disabled" name="state">
<option value="AL">Alabama</option>
<option value="WY">Wyoming</option>
</select>
</div>
<script>
$(document).ready(function () {
$(".js-example-disabled").select2({
disabled:true
});
});
</script>
