I am trying to add a search box in my glossary but something is not right. The glossary is made by ul inside ul (nav-tabs of bootstrap)`, in the js I am using the following code:
$j('#search_glossary').focus().keyup(function(e){
if (this.value.length >= 2){
$j('.nav-tabs li.active').removeClass('active');
$j('.tab-content div.active').removeClass('active');
var filterBy = this.value.toUpperCase();
for (var abbr in UlTab) {
if (abbr.toUpperCase().indexOf(filterBy) !== - 1) {
var li = abbr;
var ulTabli = UlTab[abbr];
var globalUl;
if (/tv/.test(ulTabli)) globalUl = "tv";
if (/video/.test(ulTabli)) globalUl = "video";
if (/audio/.test(ulTabli)) globalUl = "audio";
$j('ul#' + ulTabli + ' li a').show();
$j('ul#' + ulTabli + ' li a:eq(' + li + ')').show();
$j('#' + ulTabli + ' a[href="#' + li + '"]').tab('show');
$j('#glossaryTab a[href="#' + globalUl + '"]').tab('show');
break;
}
$j('.nav-tabs li.active').removeClass('active');
$j('.tab-content div.active').removeClass('active');
}
});
The HTML is in the following structure :
<ul id="glossaryTab" class="nav nav-tabs nav-justified">
<li><a href="#video" data-toggle="tab">video</a></li>
<li><a href="#audio" data-toggle="tab">audio</a></li>
<li><a href="#tv" data-toggle="tab">tv</a></li>
</ul>
<div id="glossary_content" class="tab-content">
<div class="tab-pane fade" id="video">
<ul id="videoTab" class="nav nav-pills">
<li>...</li>
<li>...</li>
</ul>
<div class="tab-content">
<div class="tab-pane glossary" id="...">...</div>
....
</div>
I have two problems:
Sometimes the search doesn't display anything and when I check with the debug console when I type
$j('#audioTab a[href="#MP3"]').tab('show'), I get[<a href="#MP3" data-toggle="tab" style="display: block;">MP3</a>]and I noticed that it only displays the div whenstyleis not set.When I search for something with empty space or has '/'
$j('ul#'+ulTabli+' li a:eq('+li+')').show();doesnt work.
EDIT : DEMO