How can I display my detail after choosing in autocomplete textbox using jquery - MVC 5 Razor

Question

How can I display my detail (Full name and Department) after choosing an Employee ID. I am using MVC5 and Razor

In this image shows my main form

Then this my employee id (textbox - autocomplete lookup)

I have created a simply jquery where it triggered when employee id is been triggered or changed

 $(".employeeID").on("click", function () {
   var empid = $(this).val();


   if (empid != undefined)
   {
      //I don't know what to write here
      //but I break point here and it triggered
   }
 });

here also the code of the textbox employee id

@Html.TextBoxFor(model => model.EmployeeID, new { @class = "form-control employeeID", @placeholder = "Employee's ID", @id = "employeeid", @required = true })

for the full name and department

@Html.DisplayFor(model => model.FullName)
@Html.DisplayFor(model => model.Department)

then after choosing the employee id it will look up in the database for getting the full name of the employee and its department.

i'm still amateur in MVC and scripting can anyone help me about this?

thanks in advance

UPDATED

            $('#employeeid').autocomplete(
            {
                source: '@Url.Action("EmployeeIDSearch", "Home")'
            }).focus(function () {
                $(this).autocomplete("search", " ")
            });

this is the jquery for my autocomplete. and below is the controller for my employee id

public ActionResult EmployeeIDSearch(string term)
    {
        // Get Tags from database
        using (var ctx = new DASH_FAEntities())
        {
            var tags = (from e in ctx.Employees
                        select e.EMT_EmployeeID.Trim()).ToList();

            return Json(tags.Where(t => t.ToLower().Contains(term.ToLower().Trim())).OrderBy(x => x),
                       JsonRequestBehavior.AllowGet);
        }
    }

My Employee Table contains

• Employee ID
• Full Name
• Department

Answer 1

You need to handle the .select event and use ajax to call a controller method that returns the details that you want to update in the DOM.

Firstly you will need to wrap the text output by the @Html.DisplayFor() method in an element so that it can be selected

<div id="fullname">@Html.DisplayFor(m => m.FullName)</div>
<div id="department">@Html.DisplayFor(m => m.Department)</div>

Then modify the script to

var name = $('#fullname);
var department = $('#department);

$('#employeeid').autocomplete({
    source: '@Url.Action("EmployeeIDSearch", "Home")',
    select: function( event, ui ) {
        var ID = ui.item.value;
        $.getJSON('@Url.Action("Details")', { ID: ui.item.value }, function(data) {
            if (data) {
                name.text(data.name);
                name.text(data.department);
            }
        }); 
    }
})

And the controller method would be (adjust to suit your properties names as required)

public ActionResult Details(int ID)
{
    Employee employee = db.Employees.Where(e => e.EMT_EmployeeID == ID).FirstOrDefault();
    if (employee == null)
    {
        return Json(null, JsonRequestBehavior.AllowGet);
    }
    else
    {
        var data = new { name = employee.FullName, department = employee.Department };
        return Json(data, JsonRequestBehavior.AllowGet);
    }
}