MinPluto/MinPluto-Frontend
MinPluto/MinPluto-Frontend
Archived
1
Fork 0
Code Issues Pull requests Activity

Add autocomplete for Search

Browse source
This commit is contained in:
Korbs 2024-07-07 13:31:32 -04:00
parent 412678dc84
commit 491b96355e
1 changed files with 99 additions and 10 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

109
src/components/Search.astro
View file

@ -1,18 +1,94 @@
---
import { Search } from '@iconoir/vue'
import { t } from 'i18next'
import { Search } from "@iconoir/vue";
import { t } from "i18next";
---
<div class="search-bar">
<input type="search" placeholder={t("HEADER.SEARCH")} aria-label="Search for a video"/>
<button onclick="Search()"><Search/></button>
<input
type="search"
placeholder={t("HEADER.SEARCH")}
aria-label="Search for a video or stream"
/>
<button onclick="Search()"><Search /></button>
<div class="suggestions"></div>
</div>
<!-- Search Scripts -->
<script is:inline>
function Search() {
var SearchQuery = document.querySelector('input[type="search"]').value
location.href = `/search?q=${SearchQuery}`
}
/*
@licstart The following is the entire license notice for the
JavaScript code in this page.
Copyright (C) 2024 SudoVanilla
The JavaScript code in this page is free software: you can
redistribute it and/or modify it under the terms of the GNU
General Public License (GNU GPL) as published by the Free Software
Foundation, either version 3 of the License, or (at your option)
any later version. The code is distributed WITHOUT ANY WARRANTY;
without even the implied warranty of MERCHANTABILITY or FITNESS
FOR A PARTICULAR PURPOSE. See the GNU GPL for more details.
As additional permission under GNU GPL version 3 section 7, you
may distribute non-source (e.g., minimized or compacted) forms of
that code without the copy of the GNU GPL normally required by
section 4, provided you include this license notice and a URL
through which recipients can access the Corresponding Source.
@licend The above is the entire license notice
for the JavaScript code in this page.
*/
// Focus input
function FocusSearch() {
document.querySelector('input[type="search"]').focus();
}
// Trigger Search
function Search() {
var SearchQuery = document.querySelector('input[type="search"]').value;
location.href = `/search?q=${SearchQuery}`;
}
///// Suggestions /////
// Dismiss when the end-user clicks else where
document.body.addEventListener("click", function (evt) {
document.querySelector(".suggestions").style.opacity = "0";
});
// When the end-user starts typing, trigget the fetch function
document
.querySelector('input[type="search"]')
.addEventListener("input", function (e) {
if (e.target.value !== "") {
document.querySelector(".suggestions").style.opacity = "1";
GetResults();
} else {
null;
}
});
// Fetch
function GetResults() {
var SearchValue = document.querySelector('input[type="search"]').value;
var YouTubeSuggestions = document.querySelector(".suggestions");
fetch(
`https://yt.sudovanilla.org/api/v1/search/suggestions?q=${SearchValue}`,
)
.then((response) => response.json())
.then((data) => {
YouTubeSuggestions.innerHTML = ListOfSuggestionsYT(data);
});
}
// Create List
function ListOfSuggestionsYT(data) {
const text = data.suggestions
.map((data) => `<a href="/search?query=${data}">${data}</a>`)
.join("\n");
return `${text}`;
}
</script>
<style lang="scss">
@ -38,7 +114,7 @@ function Search() {
display: none;
border-radius: 1rem;
aspect-ratio: 1;
background: rgba(255,255,255,0.1);
background: rgba(255, 255, 255, 0.1);
color: white;
margin: 8px 0px 0px -31px;
height: 24px;
@ -51,4 +127,17 @@ function Search() {
.search-bar[data-astro-cid-otpdt6jm] {
display: flex;
}
</style>
.suggestions {
position: absolute;
top: 60px;
background: #131313e8;
width: 100%;
border-radius: 6px;
backdrop-filter: blur(20px);
border: 1px #282828 solid;
a:hover {
background: #0d0d0d !important;
border-radius: 6px;
}
}
</style>