jQuery UI ui-找到结果时自动完成加载微调器不 stopping/disappear

Question

我通过添加 .ui-autocomplete-loading class 在我的项目中使用 JQuery UI 自动完成加载微调器。当我开始在编辑框中输入时，微调器按预期显示。如果没有匹配结果，则加载微调器消失，表示搜索完成。但如果找到匹配项，微调器仍会显示，即使在做出选择之后也是如此。（见下图）

我的目标是获得这样的结果：（当搜索完成或找到结果时，微调器应该是 removed/stopped） https://jqueryui.com/autocomplete/#multiple-remote

这是我的示例代码：

查看：

@model AutoCompleteInMVCJson.Models.City

@{
    ViewBag.Title = "www.myexample.com";
}
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<style>
    .ui-autocomplete-loading {
        background: white url("../images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Name").autocomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/Home/Index",
                    type: "POST",
                    dataType: "json",
                    data: { Prefix: request.term },
                    success: function (data) {
                        response($.map(data, function (item) {
                            return { label: item.Name, value: item.Name };
                        }))

                    }
                })
            },
            messages: {
                noResults: "", results: ""
            }
        });
    })
</script>

型号

public class City
{
    public int Id { get; set; }
    public string Name { get; set; }

}

控制器：

[HttpPost]
        public JsonResult Index(string Prefix)
        {
            //Note : you can bind same list from database
            List<City> ObjList = new List<City>()
            {

                new City {Id=1,Name="Latur" },
                new City {Id=2,Name="Mumbai" },
                new City {Id=3,Name="Pune" },
                new City {Id=4,Name="Delhi" },
                new City {Id=5,Name="Dehradun" },
                new City {Id=6,Name="Noida" },
                new City {Id=7,Name="New Delhi" }

        };
            //Searching records from list using LINQ query
            var CityName = (from N in ObjList
                            where N.Name.StartsWith(Prefix)
                          select new { N.Name });
            return Json(CityName, JsonRequestBehavior.AllowGet);
        }
    }

我该如何解决这个问题？提前致谢。

Answer 1

在 Ajax 成功方法中，您可以使用 .removeClass 函数

简单地从文本框中删除 class

$("#textboxid").removeClass("ui-autocomplete-loading");

Answer 2

感谢 Curiousdev 的意见，经过进一步调试，我找到了解决方案。

添加

$("#Name").removeClass("ui-autocomplete-loading");

success 和 complete 方法都可以解决这个问题。

jQuery UI ui-找到结果时自动完成加载微调器不 stopping/disappear

jQuery UI ui-autocomplete-loading spinner not stopping/disappear when found results

javascript

asp.net-mvc

jquery

jquery-ui

autocomplete