🎨 Improved suggestion system

ProjetProgWeb/app.js

@@ -4,7 +4,6 @@ let suggestions = document.getElementById('suggestions')
 let searchBarButton = document.getElementById('search-button')
 let loader = document.getElementsByClassName('loader')[0]
 
-let last = new Date().getTime()
 let authorName = "";
 
 function requestToApi(author) {
@@ -16,7 +15,6 @@ function requestToApi(author) {
 }
 
 // TODO : Faire un système de page plutôt que de charger 10000 résultats en une fois s'il y en a 10000..
-
 function displayResults(results) {
     let count = 0
     results.forEach(function(elem) {
@@ -38,24 +36,29 @@ function displayResults(results) {
     loader.style.display = "none"
 }
 
+let lastSearch = ""
+let last = new Date().getTime()
+
 function realTimeDisplay() {
-    if (last === null || (new Date().getTime() - last) > 500) {
     let search = document.getElementsByName("author")[0].value
-        if (search.length > 3) {
+    if (search.length > 3 && (search !== lastSearch || (new Date().getTime() - last) > 500)) {
+        lastSearch = search
         last = new Date().getTime()
         fetch(`api.php?q=authors&author=${search}`)
             .then(response => response.json())
             .then(function(data) {
                 suggestions.innerHTML = ""
                 data.forEach(function(elem) {
+                    let outsideTag = document.createElement('a')
+                    outsideTag.href = "index.php?author=" + elem
                     let name = document.createElement('p')
                     name.innerHTML = elem
-                        suggestions.appendChild(name)
+                    outsideTag.appendChild(name)
+                    suggestions.appendChild(outsideTag)
                 })
             })
     }
 }
-}
 
 searchbar.addEventListener('focus', () => {
     navbarForm.style.borderRadius = '15px 15px 0 0'
@@ -65,9 +68,11 @@ searchbar.addEventListener('focus', () => {
     searchBarButton.classList.add('animation-out')
 });
 searchbar.addEventListener('focusout', () => {
+    if (!suggestions === document.activeElement) {
         navbarForm.style.borderRadius = '15px'
         suggestions.style.display = 'none'
         searchBarButton.style.boxShadow = 'rgba(0, 0, 0, 0.15) 4px 2px 5px'
         searchBarButton.classList.remove('animation-out')
         searchBarButton.classList.add('animation-in')
+    }
 });

ProjetProgWeb/stylesheet.css

@@ -111,6 +111,11 @@ body {
     border-radius: 10px;
 }
 
+#suggestions a {
+    color: inherit;
+    text-decoration: none;
+}
+
 #suggestions p:hover {
     background-color: rgba(0, 0, 0, 0.05);
 }
@@ -137,6 +142,8 @@ body {
     padding: 5px 10px 10px 10px;
 }
 
+
+/*TODO : Faire une belle erreur*/
 .error {
     color: red;
 }