Line Manager Name quickly hidden after 1 second or less ?

Ahmed Abd El Aziz 315 Reputation points
2023-09-01T20:37:09.5466667+00:00

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
    <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js" type="text/javascript"
            language="javascript"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.5.min.js" type="text/javascript"></script>
    <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js" type="text/javascript"></script>
    <script src="https://code.jquery.com/ui/1.12.0/jquery-ui.min.js"></script>


<script>
    $(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

ASP.NET
ASP.NET
A set of technologies in the .NET Framework for building web applications and XML web services.
3,330 questions
{count} votes