diez/unusualarchive
1
1
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Search works

Browse Source
This commit is contained in:
david 2023-05-20 02:57:30 +02:00
parent 4d60016ef4
commit 2defe8a4bd
2 changed files with 33 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
core/templates/base.html
View File

@ -51,17 +51,17 @@
</ul> </ul>
<div class="float-right" style="width:100%"> <div class="float-right" style="width:100%">
<!--
<div id="searchsuggestions"></div>
<select class="select2" style="width: 200px;"></select>
-->
<form class="form-inline ml-0 ml-md-3 float-right"> <form class="form-inline ml-0 ml-md-3 float-right">
<div class="input-group input-group-sm"> <div class="input-group input-group-sm">
<input class="form-control form-control-navbar" <input class="form-control form-control-navbar" data-toggle="dropdown"
type="search" type="search"
placeholder="Search" placeholder="Search"
aria-label="Search"> aria-label="Search"
autocomplete="off"
id="search">
<ul class="dropdown-menu" id="searchdropdown">
<li><span class="dropdown-item-text">Nothing</span></li>
</ul>
<div class="input-group-append"> <div class="input-group-append">
<button class="btn btn-navbar" type="submit"> <button class="btn btn-navbar" type="submit">
<i class="fas fa-search"></i> <i class="fas fa-search"></i>

64
static/dist/js/searchsuggestions.js vendored
View File

@ -1,50 +1,38 @@
$(document).ready(() => { const searchinput = document.querySelector("#search");
}); const searchsuggestions = document.querySelector("#searchdropdown");
/*
const searchinput = document.querySelector("#searchinput");
const searchsuggestions = document.querySelector("#searchsuggestions");
searchinput.addEventListener("input", (e) => { searchinput.addEventListener("input", (e) => {
q(e.target.value); q(e.target.value);
}); });
async function q(s) { async function q(s) {
try { if (s.length < 1) {clearSuggestions(searchsuggestions)}
const response = await fetch("/api/?q=" + s); else {
const result = await response.json(); try {
console.log("Success: " + JSON.stringify(result)); const response = await fetch("/api/search/?q=" + s);
setSuggestions(searchsuggestions, result); const result = await response.json();
} catch(error) { setSuggestions(searchsuggestions, result);
console.log("Error: " + error); } catch(error) {
console.log("Error: " + error);
}
} }
} }
function clearSuggestions(o) {
const span = document.createElement("span");
span.setAttribute("class", "dropdown-item-text");
span.insertAdjacentText("afterbegin", "Nothing");
const li = document.createElement("li");
li.appendChild(span);
o.replaceChildren(li);
}
function setSuggestions(o, s) { function setSuggestions(o, s) {
const newSuggestions = []; const newSuggestions = [];
for (const vid of s) { for (const vid of s) {
const newSugg = document.createElement("a"); const a = document.createElement("a");
newSugg.setAttribute("href", "/view/" + vid.id); a.setAttribute("class", "dropdown-item")
newSugg.insertAdjacentText("afterbegin", vid.name + " " + vid.id); a.setAttribute("href", "/view/" + vid.id);
newSuggestions.push(newSugg); a.insertAdjacentText("afterbegin", vid.name + " " + vid.id);
const li = document.createElement("li");
li.appendChild(a);
newSuggestions.push(li);
} }
o.replaceChildren(...newSuggestions); o.replaceChildren(...newSuggestions);
} }
$(document).ready(function() {
$('.select2').select2({
placeholder: 'Search for videos',
ajax: {
url: '/api/search/',
data: (params) => { return { q: params.term } },
dataType: 'json',
processResults: function(data) {
for(const vid of data) {
vid.text = vid.name + " " + vid.id;
delete vid['name'];
}
return {
results: data
}
}
}
});
});
*/