admin管理员组

文章数量:1024615

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
Share Improve this question asked Mar 30, 2017 at 13:39 Owen LeeOwen Lee 4051 gold badge7 silver badges20 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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.

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
Share Improve this question asked Mar 30, 2017 at 13:39 Owen LeeOwen Lee 4051 gold badge7 silver badges20 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 3

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.

本文标签： javascriptjQuery UI uiautocompleteloading spinner not stoppingdisappear when found resultsStack Overflow

版权声明：本文标题：javascript - jQuery UI ui-autocomplete-loading spinner not stoppingdisappear when found results - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745616113a2159301.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。