Created
August 21, 2018 11:43
-
-
Save ChrisTaylorDeveloper/e285def023cbe7191ecd48118a048283 to your computer and use it in GitHub Desktop.
Filterable list of bookmarks
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<title>Bookmarks</title> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1"> | |
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css"> | |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script> | |
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script> | |
</head> | |
<body> | |
<div class="container mt-3"> | |
<h2>Handy bookmarks</h2> | |
<input class="form-control" id="myInput" type="text" placeholder="Search.."> | |
<br> | |
<ul class="list-group" id="myList"> | |
<li class="list-group-item"><a target="_blank" href="https://facebook.com/">Facebook</a></li> | |
<li class="list-group-item"><a target="_blank" href="https://twitter.com">Twitter</a></li> | |
<!-- add your own bookmarks here --> | |
</ul> | |
</div> | |
<script> | |
$(document).ready(function(){ | |
$("#myInput").on("keyup", function() { | |
var value = $(this).val().toLowerCase(); | |
$("#myList li").filter(function() { | |
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1) | |
}); | |
}); | |
}); | |
</script> | |
</body> | |
</html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
From a W3Schools example