How to set autocomplete selected item with gray background?

$(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
   // ...

});

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.