1
0
mirror of https://github.com/krateng/maloja.git synced 2023-08-10 21:12:55 +03:00

Some improvements for search function

This commit is contained in:
Krateng 2019-03-06 19:35:35 +01:00
parent 4994e59846
commit fe8b82f737
2 changed files with 21 additions and 12 deletions

View File

@ -64,7 +64,7 @@ div.footer {
left:0px; left:0px;
right:0px; right:0px;
padding:10px; padding:10px;
opacity:0.8; opacity:1;
} }
div.footer div:nth-child(1) { div.footer div:nth-child(1) {
@ -129,6 +129,7 @@ div.searchresults>span {
div.searchresults table { div.searchresults table {
width:100%; width:100%;
border-spacing:0px 4px;
} }
div.searchresults tr { div.searchresults tr {
@ -150,9 +151,8 @@ div.searchresults tr td.image {
background-position:center; background-position:center;
} }
div.searchresults tr td.info { div.searchresults tr td:nth-child(2) {
height:50px; padding-left:10px;
width:350px;
} }
div.searchresults table.searchresults_tracks td span:nth-child(1) { div.searchresults table.searchresults_tracks td span:nth-child(1) {

View File

@ -52,14 +52,19 @@
function search(searchfield) { function search(searchfield) {
txt = searchfield.value; txt = searchfield.value;
if (txt == "") {
reallyclear()
}
else {
xhttp = new XMLHttpRequest(); xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = searchresult xhttp.onreadystatechange = searchresult
xhttp.open("GET","/db/search?query=" + txt, true); xhttp.open("GET","/db/search?query=" + txt, true);
xhttp.send(); xhttp.send();
} }
}
function searchresult() { function searchresult() {
if (this.readyState == 4 && this.status == 200) { if (this.readyState == 4 && this.status == 200 && document.getElementById("searchinput").value != "") {
// checking if field is empty in case we get an old result coming in that would overwrite our cleared result window
result = JSON.parse(this.responseText); result = JSON.parse(this.responseText);
artists = result["artists"].slice(0,5) artists = result["artists"].slice(0,5)
tracks = result["tracks"].slice(0,5) tracks = result["tracks"].slice(0,5)
@ -219,13 +224,17 @@
<a href="/"><span style="font-weight:bold;">Maloja</span></a> <a href="/"><span style="font-weight:bold;">Maloja</span></a>
</div> </div>
<div> <div>
<span><input placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span> <span><input id="searchinput" placeholder="Search for an artist or track..." oninput="search(this)" onblur="clearresults()" /></span>
</div>
</div> </div>
<span id="resultwrap"></span> <span id="resultwrap"></span>
</div>
</body> </body>