Сделать вкладки пользовательского интерфейса Jquery динамически доступными - PullRequest
Новая
       27

Сделать вкладки пользовательского интерфейса Jquery динамически доступными

0 голосов
/ 11 июля 2019

У меня изначально были вкладки Bootstrap, и они были доступны для поиска, однако сейчас я использую вкладки пользовательского интерфейса JQuery, и мне нужна та же функциональность.

Вот оригинальные вкладки: 

<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, я не знаю, как получить доступ к элементам.

Ничего особенного не изменилось с точки зрения разметки: 

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

Iудалось получить это далеко, используя мою предыдущую функцию поиска.Я рядомЯ вижу, как консоль показывает совпадения, когда я произношу слово.Я просто не знаю, куда идти отсюда.

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», он сужает его до нужной вкладки, то есть вкладки с идентификатором «#how_to».Я просто не могу понять, как вызвать щелчок на этой вкладке.Я очень близок!

enter image description here Как динамически переключать вкладки на основе текста в элементе ввода?

1 Ответ

1 голос
/ 11 июля 2019

Я сделал это!

Сначала я должен был выяснить, как получить идентификатор вкладки, поэтому я зарегистрировал идентификатор, используя 

tabsContent.get(j).id

Затем я должен был выяснить, как вызвать щелчок, который я нашел здесь

Итак, моя функция стала такой: 

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

Работает довольно хорошо!

...