✨ Added suggestion feature

ProjetProgWeb/app.js

@@ -1,14 +1,23 @@
+let navbarForm = document.getElementsByClassName('navbar-form')[0]
+let searchbar = document.getElementById('searchbar')
+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) {
+    loader.style.display = "block"
     authorName = author
-    fetch(`api.php?author=${author}`)
+    fetch(`api.php?q=theses&author=${author}`)
         .then(response => response.json())
         .then(data => displayResults(data))
 }
 
+// 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) {
-    document.getElementsByClassName('loader')[0].style.display = "block"
     let count = 0
     results.forEach(function(elem) {
         let result = document.createElement('div')
@@ -26,5 +35,39 @@ function displayResults(results) {
     let nb = document.createElement("p")
     nb.innerHTML = `Nombre de résultats pour "${authorName}": ${count}.`
     document.getElementById('results-count').appendChild(nb)
-    document.getElementsByClassName('loader')[0].style.display = "none"
-}
+    loader.style.display = "none"
+}
+
+function realTimeDisplay() {
+    if (last === null || (new Date().getTime() - last) > 500) {
+        let search = document.getElementsByName("author")[0].value
+        if (search.length > 3) {
+            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 name = document.createElement('p')
+                        name.innerHTML = elem
+                        suggestions.appendChild(name)
+                    })
+                })
+        }
+    }
+}
+
+searchbar.addEventListener('focus', () => {
+    navbarForm.style.borderRadius = '15px 15px 0 0'
+    suggestions.style.display = 'block'
+    searchBarButton.style.boxShadow = 'none'
+    searchBarButton.classList.remove('animation-in')
+    searchBarButton.classList.add('animation-out')
+});
+searchbar.addEventListener('focusout', () => {
+    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')
+});