找到结果时，jQuery UI ui-autocomplete-loading微调器不会停止/消失 [英] jQuery UI ui-autocomplete-loading spinner not stopping/disappear when found results

问题描述

我通过添加.ui-autocomplete-loading类在项目中使用JQuery UI自动完成加载微调器.当我开始在编辑器框中键入内容时，微调器将按预期显示.如果没有匹配结果，则加载微调框消失，表明搜索已完成.但是，如果找到匹配项，则即使进行了选择，微调框仍会显示. (请参见下图)

I am using JQuery UI autocomplete-loading spinner in my project by adding .ui-autocomplete-loading class. When I start typing in the editor box, the spinner shows up as expect. If there is no match results, the loading spinner disappear which indicates the search complete. But if there is a match found, the spinner is still showing, even after a selection is made. (see below pic)

我的目标是获得以下结果:(当搜索完成或找到结果时，应该删除/停止微调器) https://jqueryui.com/autocomplete/#multiple-remote

My goal is to get this results: (when search complete or results found, spinner should be 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);
        }
    }

如何解决此问题?预先感谢.

How can I fix this issue? Thanks in advance.

推荐答案

感谢Curiousdev的投入，在进一步调试之后，我找到了解决方案.

Thanks for Curiousdev's input and after my further debugging I found a solution.

添加

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

成功和完整的方法都可以解决此问题.

in both success and complete method will resolve this issue.

这篇关于找到结果时，jQuery UI ui-autocomplete-loading微调器不会停止/消失的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！