Make Jquery UI Tabs Dynamically Searchable

I originally had Bootstrap tabs, and they were searchable, however, I am now using JQuery UI Tabs, and I want the same functionality.

Here are the original tabs:

<div class="container" style="margin-top:8%;">
    <div class="text-center">
        <input type="text" class="form-control" placeholder="Search..." style="margin-bottom:50px;width:500px;">
    </div>
    <!-- Nav tabs -->
    <ul class="nav nav-tabs" role="tablist" style="margin-left:0!important;">
        <li role="presentation" class="active"><a href="#commands_protocols" role="tab" data-toggle="tab">Commands/Protocols</a></li>
        <li role="presentation"><a href="#domains" role="tab" data-toggle="tab">Domains</a></li>
        <li role="presentation"><a href="#email" role="tab" data-toggle="tab">Email</a></li>
        <li role="presentation"><a href="#diagrams_notes" role="tab" data-toggle="tab">Diagrams/Notes</a></li>
        <li role="presentation"><a href="#how_to" role="tab" data-toggle="tab">How-To</a></li>
        <li role="presentation"><a href="#mysql" role="tab" data-toggle="tab">MySQL</a></li>
    </ul>
    <!-- Tab panes -->
    <div class="tab-content" style="border:1px solid #ddd;border-top:none;padding:30px;">
        <div role="tabpanel" class="tab-pane active" id="commands_protocols">
            <ul class="list-group">
                <li class="list-group-item"><a href="some_page_1.php">Some Page 1</a></li>
                <!-- MORE LIST ITEMS FOLOW -->
            </ul>
        </div>
        <!-- DOMAINS -->
        <div role="tabpanel" class="tab-pane" id="domains">
            <ul class="list-group">
                <li class="list-group-item"><a href="some_page_2.php" target="_blank">Some Page 2</a></li>
                <!-- MORE LIST ITEMS FOLLOW -->
            </ul>
        </div>
        <!-- The other tabs follow -->

    </div>
</div>

function initSearch() {
    var tabLinks = $('.nav-tabs > li'),
        tabsContent = $('.tab-content > div'),
        tabContent = [],
        string,
        i,
        j;
    for (i = 0; i < tabsContent.length; i++) {
        tabContent[i] = tabsContent.eq(i).text().toLowerCase();
    }
    $('input').on('input', function() {
        string = $(this).val().toLowerCase();
        for (j = 0; j < tabsContent.length; j++) {
            if (tabContent[j].indexOf(string) > -1) {
                tabLinks.eq(j).show();
                tabLinks.eq(j).find('a').tab('show');
            } else {
                tabLinks.eq(j).hide();
            }
        }
    });
}

This worked great. You could type in the search bar, and the tabs would switch dynamically based on the text. The problem is now that I have switched to Jquery UI Tabs, I do not know how to access the elements.

Nothing much has changed as far as the markup goes:

<div class="container" style="margin-top:8%;">
    <div class="text-center">
        <input type="text" class="form-control" placeholder="Search..." style="margin-bottom:50px;width:500px;">
    </div>
    <div id="tabs" class="nav-tabs">
        <ul>
            <li><a href="#commands_protocols">Commands/Protocols</a></li>
            <li><a href="#domains">Domains</a></li>
            <li><a href="#email">Email</a></li>
            <li><a href="#diagrams_notes">Diagrams/Notes</a></li>
            <li><a href="#how_to">How To</a></li>
            <li><a href="#mysql">MySQL</a></li>
        </ul>
        <div class="tab-content">
            <div id="commands_protocols">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
            <div id="domains">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
            <div id="email">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
            <div id="diagrams_notes">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
            <div id="how_to">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
            <div id="mysql">
                <ul class="list-group">
                    <!-- <li> elements here </li> -->
                </ul>
            </div>
        </div>
    </div>
</div>

Of course, I have initialized the tabs, and they display correctly:

$(function () {
    $('#tabs').tabs();
});

I managed to get this far using my previous search function. I'm close. I can see the console show the matches occurring as I spell out a word. I just don't know where to go from here.

function initSearch() {
    var tabLinks = $('nav-tabs > li'),
    tabsContent = $('.tab-content > div'),
    tabContentArray = [],
    string,
    i,
    j;
    for (i = 0; i < tabsContent.length; i++) {
        tabContentArray[i] = tabsContent.eq(i).text().toLowerCase();
        console.log(tabContentArray[i]); //This is showing all of the href elements in each tab-content element
    }
    $('input').on('input', function() {
        string = $(this).val().toLowerCase();
        for(j = 0; j < tabsContent.length; j++) {
            if(tabContentArray[j].indexOf(string) > -1) {
                console.log('Matched string: '+string);
                //Trigger the switch to the tab, but how?
                console.log(tabsContent.get(j));
            } else {
                //Do nothing I assume
            }
        }
    })
}

As you can see, as I start typing "ipset," it narrows it down to the correct tab, which is the tab with the id "#how_to". I'm just having trouble figuring out how to trigger the click to that tab. I'm very close!

How can I dynamically switch tabs based on the text in the input element?