如何在ASP.NET Core的jQuery Autocomplete插件中添加加载进度条

1. 修改前端HTML结构 #

在原有输入框旁侧添加加载提示元素，默认隐藏：

<div class="col-md-6 ">
<label>شغل بیمه
    <span style="color:red;margin-top:2px" >*</span>
</label>
<input class="form-control" type="text" id="SematYaShoghlBime"  asp-for="@Model.person.SematYaShoghlBime"  placeholder="جستجو کنید...">
<!-- 新增加载提示元素 -->
<span id="jobSearchLoading" style="display: none; margin-left: 10px; font-size: 14px; color: #0d6efd;">搜索中...</span>
</div>

2. 调整Autocomplete初始化脚本 #

在请求发起前显示加载提示，请求完成（无论成功失败）后隐藏提示：

$(document).ready(function () {
    $("#SematYaShoghlBime").autocomplete({
        source: function (request, response) {
            // 发起请求前显示加载提示
            $('#jobSearchLoading').show();
            $.ajax({
                url: "/Home/SearchInTaminJobs",
                data: {
                    term: request.term.trim()
                },
                dataType: "json",
                success: function (data) {
                    response(data);
                },
                error: function () {
                    // 异常时返回空列表，避免插件运行异常
                    response([]);
                },
                complete: function () {
                    // 请求完成后隐藏加载提示
                    $('#jobSearchLoading').hide();
                }
            });
        },
        minLength:7,
    });
});

3. 可选样式优化（实现输入框内嵌加载提示） #

如果要实现和参考效果一致的输入框右侧内嵌加载效果，可以添加如下样式调整：

/* 给输入框父容器加相对定位 */
.col-md-6 {
    position: relative;
}
#jobSearchLoading {
    position: absolute;
    right: 10px;
    /* 可根据实际输入框高度调整top值 */
    top: 38px;
    display: none;
}

后端接口代码无需修改，原有逻辑可正常运行。

内容的提问来源于stack exchange，提问作者sadegh farest