Q:

How to remove the text "undefined" that is appearing in the autocomplete search field?

I have a autocomplete search. If there are no results that corresponds to the search it appears the message "No results.".
And its working the message "No results" if the user introduce 3 letters that don't correspond to any result.
However it appears "undefiend" above the message "No results". Do you know how to remove that "undefiend" text?
$.widget( "custom.catcomplete", $.ui.autocomplete, {
    _create: function() {
        this._super();
        this.widget().menu( "option", "items", "> :not(.ui-autocomplete-category)" );
    },
    _renderMenu: function( ul, items ) {
        var that = this,

            currentCategory = "";

        $.each( items, function( index, item ) {
            var li;
            if ( item.category != currentCategory ) {
                ul.append( "<li>" + item.category + "</li>" );
                currentCategory = item.category;
            }
            li = that._renderItemData( ul, item );

            if ( item.category ) {
                li.attr( "aria-label", item.category + " : " + item.label );
            }

        });
    }
});

$("#search").catcomplete({
    source: "{{ URL::to('autocomplete-search') }}",
    minLength: 3,
    response: function(event, ui){
        if (!ui.content.length) {
            var noResult = { value:"", label:"No results." };
            ui.content.push(noResult);
        }
    },
    select: function(event, ui) {
        if(ui.item.category=="Conferences"){
            window.location.href = ui.item.url;
        }
        else{
            $.get(ui.item.url, function(result) {
                var newConferences = '';
                var placeholder = "{{route('conferences.show', ['id' => '1', 'slug' => 'demo-slug'])}}";

                $.each(result, function(index, conference) {
                    var url = placeholder.replace(1, conference.id).replace('demo-slug', conference.slug);
                    newConferences += '<div>\n' +
'                        <div class="card box-shaddow">\n' +
'                            <div class="card-body">\n' +
'                                <h5>'+conference.name+'</h5>\n' +
'                            </div>\n' +
'                    </div></div>';
                });
                $('#conferences').html(newConferences);
            }, 'json');
        }
    }
});

A:

You may replace the condition if ( item.category != currentCategory ) with the condition if ( item.category && item.category != currentCategory )
So that when the item doesn't have any category (which is your case : 'undefined') it doesn't append a useless line to your html.

