Searchable Dropdown With Bootstrap can make easily filter or search data for user.
Dropdowns do have their advantages. First, they conserve screen space. Because they are a standard widget (even if an unpleasant one), users know how to deal with them. And, when used in forms and for attribute selection, dropdown boxes prevent users from entering erroneous data, since they only show legal choices.
Searchable Dropdown Example :
View Demo Download Code<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
<script src="library/dselect.js"></script>
<title>How To Make Searchable Dropdown With Bootstrap?</title>
</head>
<body>
<div class="container mt-5">
<div class="row">
<div class="col-md-3"> </div>
<div class="col-md-6">
<select name="select_box" class="form-select" id="select_box">
<option value="">Select Country</option>
<option value="India">India</option>
<option value="Aus">Aus</option>
<option value="Africa">Africa</option>
</select>
</div>
<div class="col-md-3"> </div>
</div>
<br />
<br />
</div>
</body>
</html>
<script>
var select_box_element = document.querySelector('#select_box');
dselect(select_box_element, {
search: true
});
</script>Know More :
Bootstrap Dropdowns are toggleable, contextual overlays for displaying lists of links and more. They’re made interactive with the included Bootstrap dropdown JavaScript plugin. They’re toggled by clicking, not by hovering; this is an intentional design decision.
Dropdowns are built on a third party library, Popper, which provides dynamic positioning and viewport detection. Be sure to include popper.min.js before Bootstrap’s JavaScript or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper. Popper isn’t used to position dropdowns in navbars though as dynamic positioning isn’t required.
For Example :
Wrap the dropdown’s toggle (your button or link) and the dropdown menu within .dropdown, or another element that declares position: relative;. Dropdowns can be triggered from <a> or <button> elements to better fit your potential needs. The examples shown here use semantic <ul> elements where appropriate, but custom markup is supported.
