locked
Ajax autocomplete does not invoke action method RRS feed

  • Question

  • User521171331 posted

    Hi,

    I downloaded and tried this code from this tutorial - https://www.c-sharpcorner.com/uploadfile/0c1bb2/creating-autocomplete-textbox-in-asp-net-mvc-5/

    Problem is it does not invoke controller "Home" and action method "Index" while I am typing on that text. How do I fix it?

        public class City
        {
            public int Id { get; set; }
            public string Name { get; set; }
    
        }
    public class HomeController : Controller
        {
            // GET: Home
            [HttpGet]
            public ActionResult Index()
            {
                return View();
            }
            [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);
            }
        }
    @model AutoCompleteInMVCJson.Models.City
    
    @{
        ViewBag.Title = "www.compilemode.com";
    }
    @*<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>*@
    
    <script src="~/Scripts/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
    <script src="~/Scripts/jquery.unobtrusive-ajax.min.js"></script>
    <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) {
                            alert('11');
                            response($.map(data, function (item) {
                                return { label: item.Name, value: item.Name };
                            }))
    
                        }
                    })
                },
                messages: {
                    noResults: "", results: ""
                }
            });
        })
    </script>
    
    
    
    @using (Html.BeginForm())
    {
        @Html.AntiForgeryToken()
    
        <div class="form-horizontal">
    
            <hr />
    
            <div class="form-group">
    
                <div class="col-md-12">
                    @Html.EditorFor(model => model.Name, new { htmlAttributes = new { @class = "form-control" } })
    
                </div>
            </div>
    
        </div>
    }
    

    Tuesday, April 17, 2018 2:11 PM

Answers

  • User475983607 posted

    jQuery UI is not referenced.

    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

    Remember to use the browser's developer tools when debugging code.

    See the jQuery reference docs for use instructions

    https://jqueryui.com/autocomplete/

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Tuesday, April 17, 2018 2:17 PM