自动完成显示员工姓名在 1 秒或更短时间内隐藏，为什么？

Question

我正在从事 asp.net MVC 项目。在自动完成中显示直线经理名称后，我遇到问题。

自动完成功能工作成功，但在输入显示数据后出现问题。

直线经理名称在 1 秒或更短时间内隐藏，为什么会发生这种情况 这种行为在某些计算机上发生，而另一些则不会发生。

使用

Web api

致电

jquery Ajax

搜索类似“%1234%”的员工，然后显示类似

选择员工后的结果没有显示与

LineManagerName

相关的直线经理姓名

但在 1 秒或更短的时间内出现问题 自动完成显示后 线路经理名称被隐藏

那么为什么会发生这种情况

<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 助手的 html 控件

<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>

解释问题示例案例

数据库中的员工编号 表员工有 3 名员工

123456 123457 123458

用户添加输入1234，它显示3名员工

123456 123457 123458

假设用户选择123456，那么它会显示与直线经理名称成功相关的名称

但是 1 秒或更短时间后，直线经理姓名会被隐藏，所以为什么会发生这种情况

以及如何解决

Answer 1

尝试调试它，在更改事件上放置断点以查看它是否再次触发。