ahmed salah

ahmed salah

  • 1.1k
  • 547
  • 51.2k

why autocomplete display employee name become blank after 1 second ?

Sep 1 2023 8:43 PM

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

<div class="col-md-5">
                @Html.LabelFor(model => model.LineManager, htmlAttributes: new { @class = "control-label" })
                <span class="text-danger"> *</span>
            </div>

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

<div class="form-group col-md-6 hover">
            <div class="col-md-5">
                @Html.Label("Line Manager Name", htmlAttributes: new { @class = "control-label" })
                <span class="text-danger"> *</span>
            </div>

            <div class="col-md-7">
                @*<input type="text" id="LineManagerName" class="form-control" />*@
                @Html.EditorFor(model => model.LineManagerName, new { htmlAttributes = new { @class = "form-control", id = "LineManagerName" } })
                <input type="hidden" id="selectedEmployeeName" name="selectedEmployeeName">
               
                
            </div>
        </div>

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


Answers (1)