Wie bekomme ich den Inhalt des Bootstrap-Tabs?

Question

Ich habe eine Suchleiste für die FAQ-Seite erstellt, die ich mit den Bootstrap-Tabs mache. Wenn Sie auf die Schaltflächen klicken, wird der Inhalt des Tabs angezeigt - aber beim Durchsuchen des Inhalts wird dieser nicht angezeigt. Ich habe versucht, den Inhalt zu erhalten, indem die divs id passenden und dann die div Display none-inline-block Einstellung (um es sichtbar zu machen), aber es verursacht andere Probleme ....

$('#faq_search').on('keyup', function() { 

    var filter = $(this).val(); 
    if (filter.length > 2) { 

     $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
      $(this).show(); 

     } else { 

      $(this).show(); 
      $(this).addClass('foo'); 

     } 
     }); 

    } else { 
     $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     }); 
    } 

    }); 

Hier ist meine plunker

Answer 1

Ihre srcipt.js ändern .... es funktioniert:

$(document).ready(function(){ 
     $('#faq_search').on('keyup',function(){ 

      var filter = $(this).val(); 
      if (filter.length > 2) { 

      // Loop through the comment list 
      $(".faq_cont_right ul li").each(function(){ 
       $(this).removeClass('foo'); 
       // If the list item does not contain the text phrase fade it out 
       if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
        //$(this).fadeOut(); 
        $(this).show(); 
        // Show the list item if the phrase matches and increase the count by 1 
       } else { 

        $(this).show(); 
        $(this).addClass('foo'); 

       } 
      }); 
      $(".tab-content>.active").each(function(){ 
       $(this).removeClass('foo'); 
       // If the list item does not contain the text phrase fade it out 
       if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
        //$(this).fadeOut(); 
        $(this).show(); 
        // Show the list item if the phrase matches and increase the count by 1 
       } else { 

        $(this).show(); 
        $(this).addClass('foo'); 

       } 
      }); 


} else{ 
    $(".faq_cont_right ul li").each(function(){ 
    $(this).removeClass('foo'); 
    }); 
    $(".tab-content>.active").each(function(){ 
    $(this).removeClass('foo'); 
    }); 
} 


     }); 
    }); 

Answer 2

Verstanden .... einfach notwendig, um das Click-Ereignis auszulösen, wenn Übereinstimmung gefunden Ergebnisse .... $ (document). bereit (Funktion() { $ ('# faq_search') auf ('keyup', function() {

var filter = $(this).val(); 
    if (filter.length > 2) { 

    // Loop through the comment list 
    $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     //$(this).fadeOut(); 
     $(this).show(); 
     // Show the list item if the phrase matches and increase the count by 1 
     } else { 

     $(this).show(); 
     $(this).addClass('foo').trigger('click'); 

     } 
    }); 
    $(".tab-content>.active").each(function() { 
     $(this).removeClass('foo'); 
     // If the list item does not contain the text phrase fade it out 
     if ($(this).text().search(new RegExp(filter, "i")) < 0) { 
     //$(this).fadeOut(); 
     $(this).show(); 
     // Show the list item if the phrase matches and increase the count by 1 
     } else { 

     $(this).show(); 
     $(this).addClass('foo'); 

     } 
    }); 


    } else { 
    $(".faq_cont_right ul li").each(function() { 
     $(this).removeClass('foo'); 
    }); 
    $(".tab-content>.active").each(function() { 
     $(this).removeClass('foo'); 
    }); 
    } 


}); 

}).