How to make an item clickable when using autocomplete plugin

I am trying to use the autocomplete UI to list all related tickets for the user.

I got the script to run at I would like it. But, I have added a custom header to the list and this caused a problem when the user can't click on the options any more to jump to the page

here is my code

    $.widget("custom.autocompleteheader", $.ui.autocomplete, {
        _renderMenu: function (ul, items ) {
            var self = this;
            $.each(items, function (index, item) {
                self._renderItem(ul, item);
                if (index == 0){
                    ul.prepend('<li class="header-auto">Tickets that may already have your answer</li>');
                }
            });
        }
    });

$("#title").autocompleteheader({
    delay: 500,
    minLength: 5,
    source: function(request, response) {

        $.ajax({    
            type: 'POST',
            url: 'ajax/loader-related-tickets.php',     
            data: {title: request.term},
            dataType: 'json',
            cache: false,
            timeout: 30000,
            success: function(data) { 
                if(!data){
                    return;
                }

                var array = $.map(data, function(m) {
                return {
                        label: m.title,
                        url: 'view_ticket.php?id=' + m.id
                    };
                });
                response(array);
            }
        }); 

    },
    focus: function(event, ui) {
        // prevent autocomplete from updating the textbox
        event.preventDefault();
    },
    select: function(event, ui) {
        // prevent autocomplete from updating the textbox
        event.preventDefault();
        // navigate to the selected item's url
        window.open(ui.item.url);
    }
});

so the code works and it display the header and the items but when I click on a item it does not open a new page and I get this in the console

TypeError: s is undefined jquery-ui.min.js:8:9691
TypeError: s is undefined jquery-ui.min.js:8:9691
TypeError: ui.item is undefined create_ticket.js:57:3
TypeError: s is undefined

this code works with no problem, but I don't get a header

$("#title").autocomplete({
    delay: 500,
    minLength: 5,
    source: function(request, response) {

        $.ajax({    
            type: 'POST',
            url: 'ajax/loader-related-tickets.php',     
            data: {title: request.term},
            dataType: 'json',
            cache: false,
            timeout: 30000,
            success: function(data) { 
                if(!data){
                    return;
                }

                var array = $.map(data, function(m) {
                return {
                        label: m.title,
                        url: 'view_ticket.php?id=' + m.id
                    };
                });
                response(array);
            }
        }); 

    },
    focus: function(event, ui) {
        // prevent autocomplete from updating the textbox
        event.preventDefault();
    },
    select: function(event, ui) {
        // prevent autocomplete from updating the textbox
        event.preventDefault();
        // navigate to the selected item's url
        window.open(ui.item.url);
    }
});

how can I display the header and also make the item clickable and the target url opens in a new page/tab.