Autocomplete textbox from database in mvc not working

Question

I am trying to achieve autocomplete textbox functionality from database, it is not working. i have tried below code.

 $(document).ready(function () {
            $("#Manufacturer").autocomplete({
                source: function (request, response) {
                    debugger
                    $.ajax({
                        url: '@Url.Action("GetRecord", "Company")',
                        type: "POST",
                        dataType: "json",
                        data: { prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {

                                return { label: item.Manufacturer, value: item.Manufacturer };
                            }))

                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                    failure: function (response) {
                        alert(response.responseText);
                    }

                    })
                },

            });
        });

Here is my ajax call method

 [HttpPost]
        public JsonResult GetRecord(string prefix)
        {
            BAL_Branches ObjBranch = new BAL_Branches();
            DataSet ds = new DataSet();
            DataTable dt = new DataTable();
            List<ManufacturerCertificates> menufact = new List<ManufacturerCertificates>();
            ds = ObjBranch.GetManufacturerCertsForAutocomplate(prefix, Convert.ToInt64(Session["BranchID"]));
            dt = ds.Tables[0];
            // mm.BranchesList[i].ManufactCertsList = Common.ConvertDataTable<ManufacturerCertificates>(dt);
            foreach (DataRow dr in ds.Tables[0].Rows)
            {
                menufact.Add(new ManufacturerCertificates
                {
                    Manufacturer = dr["Manufacturer"].ToString(),
                    ID =Convert.ToInt64( dr["ID"].ToString())

                });
            }
           // menufact = dt.ToList<ManufacturerCertificates>();
            return Json(menufact, JsonRequestBehavior.AllowGet);
        }

The ajax method returns correct values but autocomplete textbox is not appear. any suggestions?

Thanks is advance.

Your script looks fine. What errors are you getting in the browser console? — , Jan 30 '18 at 21:54

score 0 · Accepted Answer · answered Feb 01 '18 at 09:47

I have resolve this my self as change $(document).ready() function to $(window).load()

$(window).load(function () {
            $("#Manufacturer").autocomplete({
                source: function (request, response) {
                    debugger
                    $.ajax({
                        url: '@Url.Action("GetRecord", "Company")',
                        type: "POST",
                        dataType: "json",
                        data: { prefix: request.term },
                        success: function (data) {
                            response($.map(data, function (item) {

                                return { label: item.Manufacturer, value: item.Manufacturer };
                            }))

                        },
                        error: function (response) {
                            alert(response.responseText);
                        },
                    failure: function (response) {
                        alert(response.responseText);
                    }

                    })
                },

            });
        });

and apply z-index

.ui-widget-content {
    z-index: 99999 !important;
}

now it will work fine for me.

Autocomplete textbox from database in mvc not working

1 Answers1