jQuery UI autocomplete categories not displaying

Question

Any ideas why the Category is returning undefined?

I am getting the items but not the category?

   $.widget( "custom.catcomplete", $.ui.autocomplete, {
        _renderMenu: function( ul, items ) {
            var that = this,
                currentCategory = "";
            $.each( items, function( index, item ) {
                if ( item.category != currentCategory ) {
                    ul.append( "<li class='ui-autocomplete-category'>" + item.category + "</li>" );
                    currentCategory = item.category;
                }
                that._renderItemData( ul, item );
            });
        }
   });

    function split( val ) {
            return val.split( /,\s*/ );
        }
        function extractLast( term ) {
            return split( term ).pop();
        }

    $("#people_q:not(.ui-autocomplete-input)").live("keyup", function (event) {
        $(this).catcomplete({
            source: function (request, response) {
                $.ajax({
                    url: "/json/people_search.asp",
                    dataType: "json",
                    data: {
                        q:extractLast( request.term )
                    },
                    success: function (data) {
                        response($.map(data.results.result, function (item) {
                            return {
                                label: item.sresult,
                                value: item.sresult
                            };
                        }));
                    }
                });
            },
            minLength: 2,
            open: function () {
                $(this).removeClass("ui-corner-all").addClass("ui-corner-top");
            },
            close: function () {
                $(this).removeClass("ui-corner-top").addClass("ui-corner-all");
            },
                focus: function() {
                    // prevent value inserted on focus
                    return false;
                },
                select: function( event, ui ) {
                    var terms = split( this.value );
                    // remove the current input
                    terms.pop();
                    // add the selected item
                    terms.push( ui.item.value );
                    // add placeholder to get the comma-and-space at the end
                    terms.push( "" );
                    this.value = terms.join( ", " );
                    return false;
                }
        });
    });

Here is the checked valid Json I'm using to feed the autocomplete.

{
    "results": {
        "count": "8",
        "result": [
            {
                "id": 0,
                "sresult": "web development",
                "category": "tag"
            },
            {
                "id": 1,
                "sresult": "entrepreneur",
                "category": "tag"
            },
            {
                "id": 2,
                "sresult": "Talks / Presentations",
                "category": "tag"
            },
            {
                "id": 3,
                "sresult": "music management",
                "category": "tag"
            },
            {
                "id": 4,
                "sresult": "User Experience Design",
                "category": "tag"
            },
            {
                "id": 5,
                "sresult": "English",
                "category": "tag"
            },
            {
                "id": 6,
                "sresult": "French",
                "category": "tag"
            },
            {
                "id": 7,
                "sresult": "entier Associates Ltd",
                "category": "company"
            }
        ]
    }
}

Andrew Whitaker · Accepted Answer · 2012-11-21 19:32:18Z

1

The data you're supplying the response callback does not include a category for each item. You should just be able to alter the success callback like so:

success: function (data) {
    response($.map(data.results.result, function (item) {
        return {
            label: item.sresult,
            value: item.sresult,
            category: item.category // <-----
        };
    }));
}

answered Nov 21, 2012 at 19:32

Andrew Whitaker

126k32 gold badges296 silver badges308 bronze badges

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

Collectives™ on Stack Overflow

jQuery UI autocomplete categories not displaying

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related