Tagit UI: How to display the Tag Name on autocomplete and select but send the Tag Id

Question

I am using the most current Tagit UI. I am pulling from an API with a JSON array and I am building a search feature. I want to search by TagId by populating the url with the tagid's. I can get that to work but the displayed value of the tags is the tag Id, not the desired text from the "Name" field. How can I display the Name field of the JSON array when typing (autosomplete) and when I select the tag but send the "Id" field info when search form is submitted?

Thanks

Here's the tagit initialization. I am calling the array first and then running the tagit script.

// Tag It
//load the array first
$(function (request, response) {

    var tagId;

    $.ajax({
        dataType: "json",
        data: { term: request.term },
        type: 'GET',
        contentType: 'application/json; charset=utf-8',
        crossDomain: true,
        cache: true,
        url: '/Api/Tags/StartsWith',
        success: function (data) {
            var tagsArray = $.map(data, function (item) {
                return {
                    label: item.Name,
                    value: item.Id,
                }
            });

            $('.tagit-tags').tagit({
                availableTags: tagsArray,
                allowSpaces: true,
                singleFieldNode: 'Id',
                placeholderText: 'Search by Tag',
                autocomplete: {
                    source: tagsArray,
                    minLength: 1,
                    delay: 0,
                    select: function (event, ui) {
                        $('.tagit-tags').val(ui.item.Name);
                    }
                }
            });
        },
    });
});