jQueryUI autoComplete returns back empty list

Question

In my asp.net mvc3 application, I added autoComplete for my search box. When I test it, there are 3 results returned back from the action. You can see a list showed up, however, this is an empty list, you only see 3 < li >< /li >, and there's nothing there between the li tag.

I pretty sure, action is fine, because, It did return 3 results back. I can verify that by seeing 3 empty < li > tag. what should I do to add name < li > apple < / li>

        $("#searchbox").autocomplete({
            source:"/Home/SearchIngredients",
            minLength: 2

        });


    public virtual JsonResult SearchIngredients(string term)
    {
        var ingredients = _smoothieService.GetIngredients(term);

        var data = ingredients.Select(x => new {Id = x.NDB_No, Value = x.Name}).Take(25).ToArray();
        return Json(data, JsonRequestBehavior.AllowGet);
    }

Could it be a CSS problem? When you look in Firebug do you see the elements? — Andrew Whitaker, Sep 12 '12 at 17:31
Check this: http://stackoverflow.com/questions/2497076/add-a-link-to-a-jqueryui-autocomplete-item?rq=1 — Nathan, Sep 12 '12 at 17:34

score 12 · Accepted Answer · answered Sep 12 '12 at 17:38

12

Something like this:

$('#search').autocomplete({
    source: function (request, response) {
        $.ajax({
            url: "/Home/SearchIngredients",
            dataType: 'json',
            data: request,
            success: function (data) {
                response(data.map(function (value) {
                    return {
                        'label': '<li>' + value.Id + '</li>',
                        'value': value.Value
                    };  
                }));
            }   
        }); 
    },  
    minLength: 2
})

answered Sep 12 '12 at 17:38

Nathan

2,705
23
28

1

Ah good catch, the `Value` property is uppercased. This would work but he/she could also change the controller action to return a lowercase `value` – Andrew Whitaker Sep 12 '12 at 17:42
This saved me hours of searching the web for a solution. Thank You. – Patrick W. McMahon Jan 08 '16 at 15:56

jQueryUI autoComplete returns back empty list

1 Answers1

Linked