How to set autocomplete selected item with gray background?

Question

I work on asp.net mvc call api using ajax jquery . I face issue on design auto complete

My issue auto complete selected item not display with gray background

I don't know how to do that

my code details

 $(document).ready(function () {
  
        $("#txtLineManagerId").autocomplete({
            source: function (request, response) {
                var searchText = $("#txtLineManagerId").val();
                console.log("search text" + searchText)
                $.ajax({
                    url: '@Url.Action("GetAllEmployeeBasedSearchText", "Resignation")',
                    data: { searchText: searchText },
                    method: "GET",
                    dataType: "json",
                    success: function (data) {
                        response($.map(data, function (item) {
                         
                            return { label: item.EmployeeID + " - " + item.EmployeeName + " - " + item.Designation , value: item.EmployeeID, employeeName: item.EmployeeName };

                        }))

                    }
                });
            },
            position: { my: "right top", at: "right bottom" },
            appendTo: '#searchContainer',
            select: function (event, ui) { 
                $("#LineManagerName").val(ui.item.employeeName);
    
            },
            minLength: 4,
        
        });

         <div class="col-md-7">
                    @Html.EditorFor(model => model.LineManager, new { htmlAttributes = new { @class = "form-control", id = "txtLineManagerId" } })
                    <div id="searchContainer">

                    </div>
                 
                </div>
 <div class="col-md-7">

                  
  </div>

sample for expected result I need

selection with gray color expected

Cr Bhargavi · Answer

$(document).ready(function () { $(#txtLineManagerId).autocomplete({ source: function (request response) { var searchText = $(#txtLineManagerId).val(); console.log(search text + searchText) $.ajax({ url: '@Url.Action(GetAllEmployeeBasedSearchText Resignation)' data: { searchText: searchText } method: GET dataType: json success: function (data) { response($.map(data function (item) { return { label: item.EmployeeID +  -  + item.EmployeeName +  -  + item.Designation  value: item.EmployeeID employeeName: item.EmployeeName }; })) } }); } position: { my: right top at: right bottom } appendTo: '#searchContainer' select: function (event ui) { $(#LineManagerName).val(ui.item.employeeName); } minLength: 4 focus: function(event ui) { // Apply custom styling when an item is focused $(this).val(ui.item.label).css(background-color lightgray); return false; // Prevent the default behavior } close: function(event ui) { // Remove the custom styling when the dropdown is closed $(this).css(background-color ); } }); // Rest of your HTML and JavaScript code // ... });

Prasad Raveendran · Answer

To display the selected item with a gray background in your autocomplete field you can use the focus event of the autocomplete widget to apply the desired styling when an item is focused (hovered). Here's how you can modify your code to achieve this: $(document).ready(function () { $(#txtLineManagerId).autocomplete({ source: function (request response) { var searchText = $(#txtLineManagerId).val(); console.log(search text + searchText) $.ajax({ url: '@Url.Action(GetAllEmployeeBasedSearchText Resignation)' data: { searchText: searchText } method: GET dataType: json success: function (data) { response($.map(data function (item) { return { label: item.EmployeeID +  -  + item.EmployeeName +  -  + item.Designation  value: item.EmployeeID employeeName: item.EmployeeName }; })) } }); } position: { my: right top at: right bottom } appendTo: '#searchContainer' select: function (event ui) { $(#LineManagerName).val(ui.item.employeeName); } minLength: 4 focus: function(event ui) { // Apply custom styling when an item is focused $(this).val(ui.item.label).css(background-color lightgray); return false; // Prevent the default behavior } close: function(event ui) { // Remove the custom styling when the dropdown is closed $(this).css(background-color ); } }); // Rest of your HTML and JavaScript code // ... }); In this code we've added the focus event handler to the autocomplete widget. When an item is focused (hovered) in the autocomplete dropdown it sets the background color of the input field to light gray. We also added a close event handler to remove the custom styling when the dropdown is closed. This should give you the desired gray background for the selected item in your autocomplete field.