Added project search function

This commit is contained in:
Crom (Thibaut CHARLES) 2020-09-08 15:13:51 +02:00
parent c627104c49
commit 1a2f9c81a1
Signed by: tcharles
GPG Key ID: 45A3D5F880B9E6D0
1 changed files with 54 additions and 0 deletions

View File

@ -1,3 +1,57 @@
<article id="search-article">
# Search in projects
<p>
<label for="search-box">Keyword:</label>
<input id="search-box" type="text" name="search">
<div id="search-results" style="display: none">
Showing <span id="search-results-count"></span> projects:
<ul></ul>
</div>
</p>
<script type="text/javascript">
$("#search-box").bind("input", () => {
const keyword = $("#search-box").val();
if(keyword == ""){
$("#search-results").hide();
return;
}
const keywordRe = new RegExp(keyword, "i");
let count = 0;
$("#search-results > ul")[0].innerHTML = "";
$("article").each((i, elmt) => {
if($(elmt).attr("id") == "search-article")
return;
if(keywordRe.test($(elmt).text())){
$(elmt).show();
count++;
const header = $(elmt).children("h1")[0];
if(header != null){
$("#search-results > ul").append(
"<li><a href=\"#" + $(header).attr("id") + "\">" +$(header).text() + "</a></li>"
);
}
}
else
$(elmt).hide();
})
$("#search-results").show();
$("#search-results-count").text(count);
})
</script>
</article>
<article>
# ExtraCredits Game Jam #6 <img title="Personal project" src="/img/perso.svg"/>