Durchsuchen des Seiteninhalts mit einer partiellen Zeichenfolge aus einem HTML-Eingabewert

Question

Also ich versuche, eine grundlegende Suchfunktion auf einer Seite zu implementieren. Ich habe eine Seite aus mehreren strukturierten <div> und eine Suchleiste <input> wie so:

<input id="search" type="text"> 

<div class="panel-flex"> 
    <h4>Title One</h4> 
</div> 
<div class="panel-flex"> 
    <h4>Title Two</h4> 
</div> 
<div class="panel-flex"> 
    <h4>Title Three</h4> 
</div> 

Wie Sie auf die Suchleiste eingeben, jede <h4>, die nicht den aktuellen Wert enthält wird von der Seite entfernt werden. Das ist mein Code bisher, aber ich finde keine Möglichkeit, eine teilweise Suche zu erreichen, nur eine exakte Übereinstimmung.

Zum Beispiel, wenn Sie suchten t dann würde alles zeigen, aber wenn Sie suchten th dann nur Title Three würde zeigen.

$(document).ready(function() { 
    $("#search").on("keyup", function() { 
     var searchTerm = $(this).val(); 
     $(".panel-flex").each(function() { 
      $(this).hide(); 
      if ($(this).find("h4").text() == searchTerm) { 
       $(this).show(); 
      } 
     }); 
    }); 
}); 

ich etwas will, dass strpos() Funktion wie PHP funktioniert, und alle Untersuchung führte mich an die JavaScript-Funktion indexOf(), aber versuchen, dass in meinem Code zu implementieren, bricht es sogar noch mehr.

$(document).ready(function() { 
    $("#search").on("keyup", function() { 
     var searchTerm = $(this).val(); 
     $(".panel-flex").each(function() { 
      $(this).hide(); 
      if ($(this).find("h4").indexOf(searchTerm) != -1) { 
       $(this).show(); 
      } 
     }); 
    }); 
}); 

Answer 1

Sie können, dass .filter();

mit tun

$(document).ready(function() { 
 
    $("#search").on("keyup", function() { 
 
     $('.panel-flex').hide(); 
 
     var searchTerm = $(this).val().toLowerCase(); 
 
     $('.panel-flex').filter(function(){ 
 
       return $(this).find("h4").text().toLowerCase().indexOf(searchTerm) > -1; 
 
     }).show(); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="search" type="text"> 
 

 
<div class="panel-flex"> 
 
    <h4>Title One</h4> 
 
</div> 
 
<div class="panel-flex"> 
 
    <h4>Title Two</h4> 
 
</div> 
 
<div class="panel-flex"> 
 
    <h4>Title Three</h4> 
 
</div>

Answer 2

Betrachten Sie Groß- und Kleinschreibung:

searchTerm = searchTerm.toLowerCase(); 
$(".panel-flex").each(function() { 
    if ($(this).find("h4").text().toLowerCase().indexOf(searchTerm) == -1) { 
     $(this).hide(); 
    } else { 
     $(this).show(); 
    } 
});