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?
