I can't display employeeName when change employeeId auto complete?

Question

I work on asp.net mvc auto complete project .I face issue I can't display Employee Name on

input text Id LineManagerName when change auto complete employeeId

Employee Id represent

@Html.EditorFor(model => model.LineManager, new { htmlAttributes = new { @class = "form-control", id = "txtLineManagerId" } })

Employee Name represent

<input type="text" id="LineManagerName" class="form-control" /> 

when select employee Id from list of auto complete employee Name not display on input text LineManagerName based on changed id on txtLineManagerId

What I try is

public ActionResult GetAllEmployeeBasedSearchText(string searchText)
        {
            JDEUtility jde = new JDEUtility();
         
            List<object> employeeListCriteria = new List<object>();
            employeeListCriteria = jde.GetAllEmployeeBasedSearchText(searchText);
            return Json(employeeListCriteria, JsonRequestBehavior.AllowGet);

        }
       public static List<object> GetAllEmployeeBasedSearchText(string searchText)
        {
            OleDbConnection con = new OleDbConnection(connectionString);
        
            string query = "";

            query = "SELECT cast(EMP.YAAN8 as varchar(20)) as EmployeeID,EMP.YAALPH AS EmployeeName FROM CRPDTA.F060116 EMP WHERE cast(EMP.YAAN8 as varchar(20)) LIKE '%" + searchText + "%' WITH UR";


            List<object> ApplicationsDataValues = new List<object>();
            try
            {
                
                using (var command = con.CreateCommand())
                {
                    command.CommandText = query;
                    command.CommandType = CommandType.Text;


                    command.Connection.Open();

                    using (var reader = command.ExecuteReader())
                    {
                        while (reader.Read())
                        {
                            ApplicationsDataValues.Add(new
                            {
                                
                                EmployeeID = reader.GetFieldValue<string>(0) 

                            });
                        }
                        reader.Close();
                    }

                }
                con.Close();
                return  ApplicationsDataValues;  
            }
            catch (Exception e)
            {
                return new List<object>();
            }
        }

    $(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) {
                            console.log("data is" + item.EmployeeID);
                            return { label: item.EmployeeID, value: item.EmployeeID };

                        }))

                    }
                });
            }
        });
    });

Answer 1

@html.EditorFor is Razor, which is generated on server side and cannot be changed on client side by js. As a solution, by javascript or jquery, you can send your request to server and call a method returning IActionResult and create a Partial view for it (containing razor like @html.EditorFor) and at the return value of that request, substitute the existing Razor with the new one. Here is example code
Existing Razor:

<span id="razor-to-replace">
 @Html.EditorFor(model => 
 model.LineManager, new { htmlAttributes 
 = new { @class = "form-control", id = 
"txtLineManagerId" } })
</span>

Send request by ajax:

JQuery.post('/home/GetAllEmployeeBasedSearchText',{searchText:searchText},function(value){
$('#razor-to-replace').html(value);
});

Method on server (returning partial view):

 Public IActionResult GetAllEmployeeBasedSearchText(string searchText)
{
 //do process and return model.LineManager
//send result to view in what ever way you like
ViewBag.LineManager = LineManager;
return View();
}

Partial view (to substitutewith existing one):

@{Layout=null;}

@Html.EditorFor(model => 
 ViewBag.LineManager as List<int>, new { htmlAttributes 
 = new { @class = "form-control", id = 
"txtLineManagerId" } })