Horje Website
Bs Filters Anything Stacked – Bootstrap Filters – Bootstrap Filters – Bootstrap Code

Bs Filters Anything Stacked – Bootstrap Filters

Bs Filters Anything Stacked - Bootstrap Filters - Bootstrap Filters - Bootstrap Code


 
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta name="viewport" content="width=device-width, initial-scale=1">
  5. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  6. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  7. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  8. </head>
  9. <body>
  10. <div class="container">
  11. <h2>Filter Anything</h2>
  12. <p>Type something in the input field to search for a specific text inside the div element with id="myDIV":</p>
  13. <input class="form-control" id="myInput" type="text" placeholder="Search..">
  14. <div id="myDIV">
  15. <p>I am a paragraph.</p>
  16. <div>I am a div element inside div.</div>
  17. <button class="btn">I am a button</button>
  18. <button class="btn btn-info">Another button</button>
  19. <p>Another paragraph.</p>
  20. </div>
  21. </div>
  22. <script>
  23. $(document).ready(function(){
  24. $("#myInput").on("keyup", function() {
  25. var value = $(this).val().toLowerCase();
  26. $("#myDIV *").filter(function() {
  27. $(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
  28. });
  29. });
  30. });
  31. </script>
  32. </body>
  33. </html>



Try Your Self ->



Published:
October 4, 2020
Author:
admin
Category:
Bootstrap 3, Bootstrap Source Code
Views:
26

This article was posted in Bootstrap 3, Bootstrap Source Code and tagged , , . Bookmark the permalink. Follow comments with the RSS feed for this post.Post a Comment or leave a trackback: Trackback URL.

Leave a Reply

Your email address will not be published. Required fields are marked *

 

Horje © 2011 - 2023