Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JqueryUI autocomplete error: Uncaught TypeError: Property 'results' of object #<Object> is not a function

I've looked around and can't find an answer to my problem. I have not used jquery UI much, but I'm trying to implement an autocomplete using this blog entry jQuery UI Autocomplete with JSON in MVC 4 as a guide because it's practically identical to what I need. I'm probably missing something "obvious" because I don't understand all the pieces of the autocomplete syntax yet.

Issue: I can get the dropdown of suggestions to appear. But as soon as it does I get a

 Uncaught TypeError: Property 'results' of object #<Object> is not a
 function

error in the console. Also, though the suggestions appear, I can't select any of them. the list disappears as soon as I try. Though that could be something else altogether.

The location of the error in the jqueryUI1.9.2 code is the last line in this snippet:

__response: function( content ) {
    var message;
    this._superApply( arguments );
    if ( this.options.disabled || this.cancelSearch ) {
        return;
    }
    if ( content && content.length ) {
        message = this.options.messages.results( content.length );

My jquery looks like this:

    $("#FastCategory").autocomplete({
        source: function (request, response) {
            $.ajax({
                url: "/Quiz/GetCategory",
                type: "POST",
                dataType: "json",
                data: { term: request.term },
                success: function (data) {
                    console.log("data=",data);
                    response($.map(data, function (item) {
                        console.log("item=",item,item.Description);
                        return { label: item.Description, value: item.Description };
                    }))
                }
            })
        },
        messages: {
            noResults: "", results: ""
        }
    });

My controller looks like this:

public JsonResult GetCategory(string term)
{
    var result = (from r in db.QuizCategories
                  where r.Description.ToLower().Contains(term.ToLower())
                  select new { r.Description }).Distinct();
    return Json(result, JsonRequestBehavior.AllowGet);
}

Any idea where I'm going wrong?

like image 891
Joel Avatar asked Nov 26 '13 05:11

Joel


1 Answers

As you have pointed in a comment to Narendra answer, the problem is with messages option. As answered here, results property, in messages option, must be a function instead of a string

jQuery(...).autocomplete({
    messages : {
        noResults : '',
        results : function(resultsCount) {}
    }
});
like image 67
krzychu Avatar answered Oct 10 '22 02:10

krzychu