Select Dropdown with Search Box

by

First, include the required CSS and JavaScript files in your HTML file. You can host these files yourself or use a CDN.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Select Dropdown with Search</title>
    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Select2 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/select2/dist/css/select2.min.css" rel="stylesheet">
</head>

<body>

    <div class="container mt-5">
        <h2>Select Dropdown with Search</h2>
        <select class="form-control" id="selectDropdown">
            <option value="1">Option 1</option>
            <option value="2">Option 2</option>
            <option value="3">Option 3</option>
            <option value="4">Option 4</option>
            <option value="5">Option 5</option>
        </select>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Select2 JS -->
    <script src="https://cdn.jsdelivr.net/npm/select2/dist/js/select2.min.js"></script>

    <script>
        // Initialize Select2 plugin
        $(document).ready(function() {
            $('#selectDropdown').select2();
        });
    </script>

</body>

</html>

In this example, the select2 plugin is applied to the <select> element with the ID selectDropdown. You need to ensure that you have included the jQuery library before this script if it’s not already included elsewhere in your project.

Make sure to replace the placeholder option values and text with your actual dropdown options. This code snippet assumes you’re using Bootstrap 4.x and want to implement a select dropdown with search functionality.