why autocomplete display employee name become blank after 1 second ?

I working on asp.net MVC project . I face issue after display Line Manager Name on autocomplete .

autocomplete functionality working success but issue happen after display data on input .

Line Manager name hidden after 1 second or less so why this happen this behavior happen on some computers and another not happen .

Call Web api using jquery Ajax search for employee no like '%1234%' then display similar

result after select employee no it display Line Manager Name related on LineManagerName

but issue within 1 second or less After autocomplete display Line Manager Name become hidden

so why that happen

$(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, 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,
        });

 $("#txtLineManagerId").change(function () {
            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, value: item.EmployeeID };
                    }))

                }
            });

 });

html controls using html helper


                @Html.LabelFor(model => model.LineManager, htmlAttributes: new { @class = "control-label" })
                 *
            

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


            
                @Html.Label("Line Manager Name", htmlAttributes: new { @class = "control-label" })
                 *
            

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

Explain Issue Sample Case

Employee No on database Table employee have 3 employee 123456 123457 123458

user add on input 1234 it display 3 employee 123456 123457 123458

suppose user select 123456 then it display name related on Line Manager Name success

but after 1 second or less Line Manager Name become hidden so Why This Happen

And How to solve it

$(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, value: item.EmployeeID, employeeName: item.EmployeeName }; })) } }); }, position: { my: "right top", at: "right bottom" }, appendTo: '#searchContainer', select: function (event, ui) { if (ui.item.employeeName) { $("#LineManagerName").val(ui.item.employeeName); } }, minLength: 4, }); });

1 Reply

Know the answer? Post it — somebody with the same question will find it here.

Tasadduq Burney3y ago
The issue you're facing where the Line Manager Name disappears after a brief moment could be related to how you're handling the autocomplete and change events on the #txtLineManagerId input field. Let's break down your code and see what might be causing the problem.
1. Autocomplete: You're using jQuery UI's autocomplete functionality to display a list of employee IDs based on user input. When an employee ID is selected, you're populating the Line Manager Name field.
2. Change Event: You also have a change event handler for #txtLineManagerId, but it seems to be incomplete and might be causing unexpected behavior.
```
$(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, value: item.EmployeeID, employeeName: item.EmployeeName };
                    }))
                }
            });
        },
        position: { my: "right top", at: "right bottom" },
        appendTo: '#searchContainer',
        select: function (event, ui) {
            if (ui.item.employeeName) {
                $("#LineManagerName").val(ui.item.employeeName);
            }
        },
        minLength: 4,
    });
});
```
Here's a potential reason for the issue:
- When you select an employee ID from the autocomplete dropdown, it sets the Line Manager Name, but the change event handler is still being triggered afterward.
To solve this issue, you can do the following:
1. Remove the change Event Handler: Since you're already handling the selection using the select event in the autocomplete, there's no need for a separate change event handler for #txtLineManagerId. Remove it or make it empty.
2. Check for null or empty in the select Event: Before setting the Line Manager Name, you should check if the selected item has a valid employee name. This will prevent setting it to null or empty.