jQuery UI ui-autocomplete-loading spinner 在找到结果时不会停止/消失答案

【问题标题】：jQuery UI ui-autocomplete-loading spinner not stopping/disappear when found resultsjQuery UI ui-autocomplete-loading spinner 在找到结果时不会停止/消失
【发布时间】：2017-08-24 11:33:49
【问题描述】：

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

我的目标是得到这个结果：（当搜索完成或找到结果时，微调器应该被移除/停止） 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);
        }
    }

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

【问题讨论】：

标签： javascript jquery asp.net-mvc jquery-ui autocomplete

【解决方案1】：

在 Ajax 成功方法中，您可以使用 .removeClass 函数简单地从文本框中删除类

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

【讨论】：

嗨，我添加了 $("#Name").removeClass("ui-autocomplete-loading");在响应功能之前成功。行为发生了逆转。当找到匹配项时，微调器消失。但是当没有找到匹配时，微调器总是显示。

【解决方案2】：

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

添加

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

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

【讨论】：