<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dropdown Search with jQuery</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        #dropdownSearch {
            margin-bottom: 10px;
            padding: 5px;
            width: 250px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        .dropdown-container {
            display: inline-block;
            position: relative;
        }
        #filteredDropdown {
            display: none;
            position: absolute;
            background: white;
            border: 1px solid #ddd;
            border-radius: 4px;
            width: 100%;
            max-height: 150px;
            overflow-y: auto;
            z-index: 1000;
        }
        #filteredDropdown div {
            padding: 8px;
            cursor: pointer;
        }
        #filteredDropdown div:hover {
            background: lightgray;
        }
    </style>
</head>
<body>
  
    <input id="dropdownSearch" type="text" placeholder="Search options...">  

    <div class="dropdown-container">
        <select id="dropdownList">
            <option>New York</option>
            <option>Los Angeles</option>
            <option>Chicago</option>
            <option>Houston</option>
            <option>Miami</option>
        </select>
        <div id="filteredDropdown"></div>
    </div>

    <script>
        $(document).ready(function(){
            var originalOptions = [];

            // Store original dropdown values
            $("#dropdownList option").each(function() {
                originalOptions.push($(this).text());
            });

            $("#dropdownSearch").on("keyup", function() {
                var value = $(this).val().toLowerCase();
                var filteredOptions = originalOptions.filter(function(option) {
                    return option.toLowerCase().indexOf(value) > -1;
                });

                $("#filteredDropdown").empty().toggle(filteredOptions.length > 0);
                
                filteredOptions.forEach(function(option) {
                    $("#filteredDropdown").append("<div>" + option + "</div>");
                });
            });

            // Handle option selection
            $("#filteredDropdown").on("click", "div", function() {
                $("#dropdownList").val($(this).text());
                $("#filteredDropdown").hide();
            });

            $(document).on("click", function(event) {
                if (!$(event.target).closest('.dropdown-container').length) {
                    $("#filteredDropdown").hide();
                }
            });
        });
    </script>

</body>
</html>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.