Jquery-ui autocomplete is not showing the Drop Down

Question

I realize this question has been asked numerous times (I read them all) yet I still cannot get mine to work. I am using jquery-ui autocomplete and everything appears to work flawlessly except nothing drops down from my text input.

HTML:

<input type="text" id="CustSearchText" />

Controller:

[HttpGet]
public JsonResult Search_auto_complete(string search_name, string search_type)
{
    if (search_name != null)
    {
        var db = new EDM_Customer();
        var customerItems = from cI in db.customer
                            select cI;

        if (search_type == "startsWith")
        {
            customerItems = customerItems.Where(cst => cst.cust_nm.Trim().ToLower().StartsWith(search_name.ToLower()));
        }
        else //contains
        {
            customerItems = customerItems.Where(cst => cst.cust_nm.Trim().ToLower().Contains(search_name.ToLower()));
        }

        var matches = (from c in customerItems 
                       select new
                       {
                           cust_nm = c.cust_nm
                       }).Take(5).ToList();

        return Json(matches, JsonRequestBehavior.AllowGet);
    }
    else
    {
        return null;
    }
}

Javascript:

$("#CustSearchText").unbind().autocomplete({
        source: function (request, search_type, response) {
            search_type = $(".radio_label input[name=searchType]:checked").val();
            $.ajax({
                url: "/Customer/Search_auto_complete",
                //type: "GET",
                dataType: "json",
                //contentType: "application/json",
                data: { search_name: request.term, search_type: search_type },
                success: function (data) {
                    response($.map(data, function (item) {
                        //alert(item.cust_nm);
                        return {
                            label: item.cust_nm
                        };
                    }));
                },
                error: function (response) {
                    alert("Err: " + response.responseText);
                },
                failure: function (response) {
                    alert("Failure: " + response.responseText);
                }
            });
        },
        select: function (e, i) {
            $("#CustSearchText").val(i.item.Value);
        },
        minLength: 1
    });

If I un-comment the alert(item.cust_nm) in the js, it will display all matching records one at a time. However, the drop down from my textbox never appears. It's like the return is not working.

Any clues as to what is wrong would be greatly appreciated.

Answer 1

//...
response($.map(data, function (item) {
                        //alert(item.cust_nm);
                        return {
                            label: item.cust_nm
                        };
                    }));
//...

You have not defined response as a function. Maybe a tad obvious, but that's what's wrong. I think you could have meant to put response[/*...*/]. I'm not sure what is wrong with it. I only know that is where it is going wrong. Maybe you defined a function response? if so, you either need to change the variable name or to change the name of the function.