🎨 Improving filters

ProjetProgWeb/app.js

@@ -146,7 +146,8 @@ function displayResults(results) {
 
             let qTitle = elem[2]
             let title = document.createElement('p')
-            title.innerText = qTitle
+            pre_replacement = new RegExp(searchString, 'gi').exec(qTitle)
+            title.innerHTML = qTitle.replace(pre_replacement, `<mark>${pre_replacement}</mark>`)
 
             let firstElement = document.createElement('div')
             firstElement.classList.add('result-element-header')
@@ -187,7 +188,7 @@ function displayResults(results) {
         })
 
         let nb = document.createElement("p")
-        nb.innerHTML = `Nombre de résultats pour "${searchString}": 
+        nb.innerHTML = `Nombre de résultats en ${queryOption} pour "${searchString}": 
             ${new Intl.NumberFormat('fr-FR', { maximumSignificantDigits: 3 }).format(count)}.`
         resultsCount.appendChild(nb)
 
@@ -245,6 +246,7 @@ function realTimeDisplay() {
         fetch(`api.php?q=suggestion&search=${search}&option=${queryOption}`)
             .then(response => response.json())
             .then(results => {
+                if (results.data) {
                     suggestions.innerHTML = ""
                     if (!results.data.length) {
                         hideSuggestions()
@@ -260,6 +262,7 @@ function realTimeDisplay() {
                         })
                         suggestions.appendChild(name)
                     })
+                }
             })
     }
 }
@@ -325,7 +328,7 @@ document.addEventListener('click', e => {
             toggleSwitch = e.target.firstElementChild
             toggleSwitchParent = e.target
         }
-        if (toggleSwitch !== null) {
+        if (toggleSwitch !== null && toggleSwitchParent !== null) {
             if (toggleSwitch.classList.contains('untoggle')) {
                 toggleSwitchParent.style.backgroundColor = '#FFF'
                 toggleSwitch.classList.replace('untoggle', 'toggle')

ProjetProgWeb/class/dump.php

@@ -55,7 +55,7 @@ class dump {
         return $theses_array;
     }
 
-    public static function getSuggestions(string $search, string $option) : array {
+    public static function getSuggestions(string $search, string $option) : ?array {
         $array = [];
 
         $search = '%' . $search . '%';
@@ -63,7 +63,17 @@ class dump {
         $pdo_obj = new conf();
         $pdo = $pdo_obj->getPDO();
 
-        $stmt = $pdo->prepare("SELECT DISTINCT author FROM theses WHERE author LIKE :search LIMIT 10;");
+        if ($option == 'auto') {
+            return null;
+        }
+
+        $stmt = match ($option) {
+            'author' => $pdo->prepare("SELECT DISTINCT author FROM theses WHERE author LIKE :search LIMIT 10;"),
+            'title' => $pdo->prepare("SELECT DISTINCT title FROM theses WHERE title LIKE :search LIMIT 5;"),
+            'director' => $pdo->prepare("SELECT DISTINCT these_director FROM theses WHERE these_director LIKE :search LIMIT 10;"),
+            'establishment' => $pdo->prepare("SELECT DISTINCT soutenance_establishment FROM theses WHERE soutenance_establishment LIKE :search LIMIT 10;"),
+            default => "",
+        };
         $stmt->bindParam(':search', $search, PDO::PARAM_STR, 100);
         $stmt->execute();
 

ProjetProgWeb/navbar.php

@@ -7,7 +7,7 @@
             <path id="crossSvg" class="spin-fade" d="M23.954 21.03l-9.184-9.095 9.092-9.174-2.832-2.807-9.09 9.179-9.176-9.088-2.81 2.81 9.186 9.105-9.095 9.184 2.81 2.81 9.112-9.192 9.18 9.1z"/>
         </svg>
 
-        <h1 id="title">theses.fr</h1>
+        <h1 id="title"><a href="/projet_programmation_web/ProjetProgWeb/">theses.fr</a></h1>
 
         <div class="research-section">
             <form class="navbar-form" method="GET" action="index.php">
@@ -28,6 +28,7 @@
             <h3>Filtres : </h3>
             <div class="filters">
                 <p id="f-auto">Auto</p>
+                <p id="f-title">Titre</p>
                 <p id="f-author">Auteur</p>
                 <p id="f-director">Directeur</p>
                 <p id="f-establishment">Etablissement</p>

ProjetProgWeb/stylesheet.css

@@ -27,6 +27,13 @@ header {
     height: 75px;
 }
 
+#title a {
+    text-decoration: none;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+}
+
 .navbar {
     position: relative;
     z-index: 50;