Added search bar feature

This commit is contained in:
Joshuafrankle 2023-05-10 11:53:44 +05:30
parent 86fbd9ee95
commit fc2dc61c26
1 changed files with 19 additions and 0 deletions

View File

@ -12,6 +12,9 @@
</head> </head>
<body> <body>
<div class="container-lg px-3 my-5 markdown-body"> <div class="container-lg px-3 my-5 markdown-body">
<div class="search-container">
<input type="text" placeholder="Search...">
</div>
{% if site.title and site.title != page.title %} {% if site.title and site.title != page.title %}
<h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1> <h1><a href="{{ "/" | absolute_url }}">{{ site.title }}</a></h1>
{% endif %} {% endif %}
@ -23,6 +26,7 @@
Awesome ChatGPT Prompts is open source. {% github_edit_link "Improve this page" %}. Awesome ChatGPT Prompts is open source. {% github_edit_link "Improve this page" %}.
</div> </div>
{% endif %} {% endif %}
</div> </div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/anchor-js/4.1.0/anchor.min.js" integrity="sha256-lZaRhKri35AyJSypXXs4o6OPFTbTmUoltBbDCbdzegg=" crossorigin="anonymous"></script>
<script>anchors.add();</script> <script>anchors.add();</script>
@ -47,6 +51,21 @@
}, false); }, false);
x.previousElementSibling.previousElementSibling.prepend(button); x.previousElementSibling.previousElementSibling.prepend(button);
}); });
// Add search functionality
const searchBar = document.querySelector(".search-container input");
searchBar.addEventListener("keyup", function() {
const searchTerm = searchBar.value.toLowerCase();
const prompts = document.querySelectorAll("h2[id^=act] + p + blockquote");
prompts.forEach(prompt => {
const promptText = prompt.innerText.toLowerCase();
if (promptText.includes(searchTerm)) {
prompt.style.display = "block";
} else {
prompt.style.display = "none";
}
});
});
</script> </script>
<style>video { max-width: 100% !important; }</style> <style>video { max-width: 100% !important; }</style>
<!-- Google tag (gtag.js) --> <!-- Google tag (gtag.js) -->