Improve search form ux

If a user uses the search function within a certain area (e.g. subforum or thread), only the corresponding area will be searched. If the search does not return any results in this case, the "advanced filter" area in the search form is collapsed and therefore not directly visible to the user that advanced filters are active.

diff --git a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
index e99bedea6d816f79cbf7892081e1ff49ff0298b9..bb0127940eac164254ae943b0940c120b996edae 100644 (file)
--- a/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
+++ b/ts/WoltLabSuite/Core/Ui/Search/Extended.ts
@@ -42,6 +42,7 @@ export class UiSearchExtended {
   private readonly queryInput: HTMLInputElement;
   private readonly typeInput: HTMLSelectElement;
   private readonly delimiter: HTMLDivElement;
+  private readonly filtersContainer: HTMLElement;
   private searchID: number | undefined = undefined;
   private pages = 0;
   private activePage = 1;
@@ -53,6 +54,7 @@ export class UiSearchExtended {
     this.form = document.getElementById("extendedSearchForm") as HTMLFormElement;
     this.queryInput = document.getElementById("searchQuery") as HTMLInputElement;
     this.typeInput = document.getElementById("searchType") as HTMLSelectElement;
+    this.filtersContainer = document.querySelector(".searchFiltersContainer") as HTMLElement;
     this.delimiter = document.createElement("div");
 
     this.form.insertAdjacentElement("afterend", this.delimiter);
@@ -133,6 +135,10 @@ export class UiSearchExtended {
       this.pages = pages!;
       this.activePage = pageNo!;
       this.showSearchResults(template!);
+    } else if (Object.keys(this.getFormData()).length > 4) {
+      // If no results are found and advanced filters are active,
+      // make sure that the corresponding area is shown,
+      this.filtersContainer.setAttribute("open", "");
     }
   }
 

diff --git a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
index b1ccb74a29f16ceec9a19af20664cec30f6f2704..31c02e7b641d42b608feec85b1aed813d872cc66 100644 (file)
--- a/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
+++ b/wcfsetup/install/files/js/WoltLabSuite/Core/Ui/Search/Extended.js
@@ -20,6 +20,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
         queryInput;
         typeInput;
         delimiter;
+        filtersContainer;
         searchID = undefined;
         pages = 0;
         activePage = 1;
@@ -30,6 +31,7 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
             this.form = document.getElementById("extendedSearchForm");
             this.queryInput = document.getElementById("searchQuery");
             this.typeInput = document.getElementById("searchType");
+            this.filtersContainer = document.querySelector(".searchFiltersContainer");
             this.delimiter = document.createElement("div");
             this.form.insertAdjacentElement("afterend", this.delimiter);
             this.initEventListener();
@@ -98,6 +100,11 @@ define(["require", "exports", "tslib", "../../Ajax", "../../Date/Picker", "../..
                 this.activePage = pageNo;
                 this.showSearchResults(template);
             }
+            else if (Object.keys(this.getFormData()).length > 4) {
+                // If no results are found and advanced filters are active,
+                // make sure that the corresponding area is shown,
+                this.filtersContainer.setAttribute("open", "");
+            }
         }
         updateQueryString(searchAction) {
             const url = new URL(this.form.action);