I am using JQuery UI autoplete-loading spinner in my project by adding .ui-autoplete-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 plete. But if there is a match found, the spinner is still showing, even after a selection is made. (see below pic)

My goal is to get this results: (when search plete or results found, spinner should be removed/stopped)

Here is my example code:

View:

@model AutoCompleteInMVCJson.Models.City

@{
    ViewBag.Title = "www.myexample";
}
<link rel="stylesheet" href="//code.jquery/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src=".12.4.js"></script>
<script src=".12.1/jquery-ui.js"></script>
<style>
    .ui-autoplete-loading {
        background: white url("../images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Name").autoplete({
            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>

Model

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

}

Controller:

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

I am using JQuery UI autoplete-loading spinner in my project by adding .ui-autoplete-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 plete. But if there is a match found, the spinner is still showing, even after a selection is made. (see below pic)

My goal is to get this results: (when search plete or results found, spinner should be removed/stopped) https://jqueryui./autoplete/#multiple-remote

Here is my example code:

View:

@model AutoCompleteInMVCJson.Models.City

@{
    ViewBag.Title = "www.myexample.";
}
<link rel="stylesheet" href="//code.jquery./ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery./jquery-1.12.4.js"></script>
<script src="https://code.jquery./ui/1.12.1/jquery-ui.js"></script>
<style>
    .ui-autoplete-loading {
        background: white url("../images/ui-anim_basic_16x16.gif") right center no-repeat;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $("#Name").autoplete({
            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>

Model

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

}

Controller:

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

• javascript
• jquery
• asp-mvc
• jquery-ui
• autoplete

2 Answers 2

In Ajax success method you can simply remove class from textbox using .removeClass function

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

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

Add

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

in both success and plete method will resolve this issue.