jQuery UI Autocomplete with ASP MVC

Question

I'm trying to get the jQuery Automcomplete thing to work, but it wont do as i want :P This is my code:

JavaScript:

        $("#CustomerID").autocomplete({
            source: function(request, response) {
                $.ajax({
                    type: "POST",
                    url: "/customer/search",
                    dataType: "json",
                    data: {
                        term: request.term
                    },
                    error: function(xhr, textStatus, errorThrown) {
                        alert('Error: ' + xhr.responseText);
                    },
                    success: function(data) {
                        response($.map(data, function(c) {
                            return {
                                label: c.Company,
                                value: c.ID
                            }
                        }));
                    }
                });
            },
            minLength: 2,
            select: function(event, ui) {
                alert('Select');
            }
        });

ASP MVC:

    [AcceptVerbs(HttpVerbs.Post)]
    public JsonResult Search(string term)
    {
        if (term == null)
            term = "";

        List<JSON_Customer> customers = repCustomer.FindCustomers(term).ToList();
        return Json(customers);
    }

    public class JSON_Customer
    {
        public int ID { get; set; }
        public string Company { get; set; }
    }

    public IQueryable<JSON_Customer> FindCustomers(string searchText)
    {
        return from c in _db.Customers
               where c.Company.Contains(searchText)
               orderby c.Company
               select new JSON_Customer
               {
                   ID = c.ID,
                   Company = c.Company
               };
    }

I get the request from $.ajax and I return the correct list of customers according to the search term. And the success method is invoked. I can see that data has a [object Object] value but what do I do next? No customers drops down in my list. I'm using the response($.map... code from the http://jqueryui.com/demos/autocomplete/#remote-jsonp but it just wont work.

Anyone know why?

Can you use a diagnostic/debug tool such as Firebug (plugin) for FF, Developer Tools (F12 for IE or <kbd>Ctrl</kbd>+<kbd>Shift</kbd>+<kbd>J</kbd> for Chrome) to see exactly what is returned to the browser, and how it's treated? — Tomas Aschan
– Tomas Aschan, Commented Sep 21, 2010 at 20:27

Hogan · Accepted Answer · 2010-09-21 20:28:09Z

1

I use this before my first AJAX request -- I bet it will help. Defines the standard items and takes care of the "d" attribute microsoft puts in as the top level attribute.

  $.ajaxSetup({
     type: "POST",
     contentType: "application/json; charset=utf-8",
     data: "{}",
     dataFilter: function(data) {
        var msg;

        if (typeof (JSON) !== 'undefined' && typeof (JSON.parse) === 'function')
           msg = JSON.parse(data);
        else
           msg = eval('(' + data + ')');

        if (msg.hasOwnProperty('d'))
           return msg.d;
        else
           return msg;
     }
  });

answered Sep 21, 2010 at 20:28

Hogan

70.7k10 gold badges83 silver badges119 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Martin at Mennt Over a year ago

Wow, thank you! It did the trick, and now everything is working. I had to remove contentType: "application/json; charset=utf-8" though, since when I had it on the term was null inside Search(string term).

Hogan Over a year ago

You're welcome. This was originally written to work with ASP.NET 2.0 -- it might be the newer DLLs don't need the contentType... not sure about that.

Collectives™ on Stack Overflow

jQuery UI Autocomplete with ASP MVC

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related