How to include search option in the drop-down menu

[vidhya_mouli]

I have a drop down menu which will display the subordinated and subordinates subordinate (from the sys_user table) of the current logged in user.

HTML:

<div class="styled-dropdown-container"> 
    <select id="userDropdown" ng-onclick="myFunction()" ng-model="selectedUser" ng-options="user.name for user in c.data.managedUsers track by user.sys_id" class="styled-dropdown-select">
        <option value="">-- Select a User --</option>

      </select>
</div>

CSS:

.styled-dropdown-container {
    max-width: 220px;
    margin: 20px auto;
    font-family: 'Helvetica Neue', sans-serif;
    text-align: center;
}

.styled-dropdown-label {
    font-size: 16px;
    color: #444;
    margin-bottom: 8px;
    display: block;
    font-weight: bold;
}

.styled-dropdown-select {
    width: 100%;
    padding: 10px 14px;
    font-size: 15px;
    color: #555;
    border: 2px solid #6a9fb5;
    border-radius: 10px;
    background-color: #f5faff;
    appearance: none; /* Hides default arrow */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24' fill='%236a9fb5'%3E%3Cpath d='M7 10l5 5 5-5H7z'/%3E%3C/svg%3E"); /* Custom arrow icon */
    background-repeat: no-repeat;
    background-position: right 10px center;
    transition: all 0.3s ease;
    cursor: pointer;
}

.styled-dropdown-select:hover {
    background-color: #e0f7ff;
    border-color: #5a8fa5;
}

.styled-dropdown-select:focus {
    outline: none;
    border-color: #407c91;
    background-color: #d6f2ff;
    box-shadow: 0 0 5px rgba(64, 124, 145, 0.5);
}

.styled-dropdown-select option {
    color: #333;
}

Client Script:
function($scope) {
    $scope.$watch('selectedUser', function(newVal, oldVal) {
        if (newVal) {
            // Do something with the selected user, e.g., load more details
        }
    });
}

Client Script:

function($scope) {
    $scope.$watch('selectedUser', function(newVal, oldVal) {
        if (newVal) {
            // Do something with the selected user, e.g., load more details
        }
    });
}

Server Script:

(function() {
    data.managedUsers = [];

    // Define the recursive function to fetch subordinates up to a certain depth
    function getSubordinates(managerId, level, maxLevel) {
        if (level > maxLevel) {
            return;
        }
        
        var userGr = new GlideRecord('sys_user');
        userGr.addQuery('manager', managerId);
        userGr.query();

        while (userGr.next()) {
            var userName = userGr.getValue('name');
            if (userName) { // Only add users with a non-null name
							
				
							
                var user = {
                    sys_id: userGr.getValue('sys_id'),
                    name: userName
                };
                data.managedUsers.push(user);

                // Recursively find subordinates of this user
                getSubordinates(userGr.getValue('sys_id'), level + 1, maxLevel);
            }
        }
    }

    // Check if the logged-in user is a manager and start the recursive search
    var currentUser = gs.getUserID();
    getSubordinates(currentUser, 1, 4); // Set max level to 4
})();

This is working as expected. However, I am not sure how to include search option in the drop-down menu. Can someone help me with this.

[vidhya_mouli · Accepted solution]

I resolved this using SN-record-picker.