使 Jquery UI 选项卡可动态搜索

Question

我最初有 Bootstrap 标签，它们是可搜索的，但是，我现在使用 JQuery UI 标签，我想要相同的功能。

原始标签页如下：

<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();
            }
        }
    });
}

效果很好。您可以在搜索栏中输入内容，选项卡将根据文本动态切换。现在的问题是我已经切换到 Jquery UI 选项卡，我不知道如何访问元素。

就标记而言没有太大变化：

<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>

当然，我已经初始化了选项卡，它们显示正确：

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

我使用以前的搜索功能设法做到了这一点。快到了。我可以看到控制台显示在我拼出单词时发生的匹配项。我只是不知道从这里去哪里。

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
            }
        }
    })
}

如您所见，当我开始输入 "ipset," 时，它将范围缩小到正确的选项卡，即 ID 为“#how_to”的选项卡。我只是无法弄清楚如何触发对该选项卡的点击。我很接近！

如何根据输入元素中的文本动态切换标签？

Answer 1

我做到了！

首先我必须弄清楚如何获取选项卡 ID，所以我使用

记录了该 ID

tabsContent.get(j).id

然后我不得不弄清楚如何触发点击，我找到了 here

所以，我的函数变成了这样：

function initSearch() {
        var 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]);
        }
        $('input').on('input', function() {
            string = $(this).val().toLowerCase();
            for(j = 0; j < tabsContent.length; j++) {
                if(tabContentArray[j].indexOf(string) > -1) {
                    //Get the tab's id
                    var id = tabsContent.get(j).id;
                    //Trigger the switch to the tab
                    $('#tabs a[href="#'+id+'"]')[0].click();
                } 
            }
        });
    }

效果很好！

使 Jquery UI 选项卡可动态搜索

Make Jquery UI Tabs Dynamically Searchable

jquery

jquery-ui

jquery-ui-tabs