Brandon Meyer
Brandon Meyer

Reputation: 349

MVC 3 jQuery UI autocomplete not displaying the results

I have searched many times and find examples which match my code structure perfect. Yet I am not getting the results from my ajax to display on the input box.

I get results from the POST that have been evaulated with firebug and everything looks great.

Here is the javascript im using.

<script type="text/javascript" language="javascript">
$(function () {

    $("input.FamousPerson-List").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/FamousPeople/FPPAutoComplete",
                type: "POST",
                dataType: "json",
                data: {
                    searchText: request.term,
                    maxResults: 12
                },
                success: function (data) {
                    response($.map(data, function (item) {
                        return {
                            value: item.DisplayName
                        }
                    }))
                }
            });
        }
    });

});

Here is a link of the actual code I am using on the web.AutoCompleteTesting Type just about any letter in one of the boxes below to invoke it.

Thanks.

Upvotes: 1

Views: 2410

Answers (1)

Andrew Whitaker
Andrew Whitaker

Reputation: 126042

If you look closely at the request being sent up, you'll notice that a callback parameter is being added. Weird, right? Since you're doing a local AJAX post, not a cross-domain (JSONP) one.

I noticed that your project includes jQuery Validate. According to this answer to a question dealing with a similar problem (performing a JSONP request instead of a normal JSON request even though you asked for one), it's a known issue in jQuery validate.

Judging by the other answer, you can change your version of jQuery or perhaps use a patched version of jQuery validate (found here).

Upvotes: 2

Related Questions