Draft of the sugggestion dropdown for the search bar.

This can be activated by adding `showSearchSuggestions: true` to the search widget config.

src/components/widgets/search/search.jsx

@@ -2,7 +2,7 @@ import { useState, useEffect, useCallback, Fragment } from "react";
 import { useTranslation } from "next-i18next";
 import { FiSearch } from "react-icons/fi";
 import { SiDuckduckgo, SiMicrosoftbing, SiGoogle, SiBaidu, SiBrave } from "react-icons/si";
-import { Listbox, Transition } from "@headlessui/react";
+import { Listbox, Transition, Combobox } from "@headlessui/react";
 import classNames from "classnames";
 
 import ContainerForm from "../widget/container_form";
@@ -77,6 +77,7 @@ export default function Search({ options }) {
   const [selectedProvider, setSelectedProvider] = useState(
     searchProviders[availableProviderIds[0] ?? searchProviders.google],
   );
+  const [searchSuggestions, setSearchSuggestions] = useState([]);
 
   useEffect(() => {
     const storedProvider = getStoredProvider();
@@ -87,9 +88,40 @@ export default function Search({ options }) {
     }
   }, [availableProviderIds]);
 
+  useEffect(() => {
+    const abortController = new AbortController();
+
+    if (options.showSearchSuggestions && selectedProvider.suggestionUrl && query.trim() !== searchSuggestions[0]) {
+      fetch(`/api/search/searchSuggestion?query=${encodeURIComponent(query)}&providerName=${selectedProvider.name}`, {
+        signal: abortController.signal,
+      })
+        .then(async (searchSuggestionResult) => {
+          const newSearchSuggestions = await searchSuggestionResult.json();
+
+          // Check if there is a search suggestion
+          if (newSearchSuggestions) {
+            // Restrict the searchSuggestion to 4 entries
+            if (newSearchSuggestions[1].length > 4) {
+              newSearchSuggestions[1] = newSearchSuggestions[1].splice(0, 4);
+            }
+
+            // Save the new search suggestions in their state.
+            setSearchSuggestions(newSearchSuggestions);
+          }
+        })
+        .catch(() => {
+          // If there is an error, just ignore it. There just will be no search suggestions.
+        });
+    }
+
+    return () => {
+      abortController.abort();
+    };
+  }, [selectedProvider, options.showSearchSuggestions, query, searchSuggestions]);
+
   const submitCallback = useCallback(
-    (event) => {
-      const q = encodeURIComponent(query);
+    (value) => {
+      const q = encodeURIComponent(value);
       const { url } = selectedProvider;
       if (url) {
         window.open(`${url}${q}`, options.target || "_blank");
@@ -97,11 +129,9 @@ export default function Search({ options }) {
         window.open(`${options.url}${q}`, options.target || "_blank");
       }
 
-      event.preventDefault();
-      event.target.reset();
       setQuery("");
     },
-    [options.target, options.url, query, selectedProvider],
+    [selectedProvider, options.url, options.target],
   );
 
   if (!availableProviderIds) {
@@ -114,11 +144,12 @@ export default function Search({ options }) {
   };
 
   return (
-    <ContainerForm options={options} callback={submitCallback} additionalClassNames="grow information-widget-search">
+    <ContainerForm options={options} additionalClassNames="grow information-widget-search">
       <Raw>
         <div className="flex-col relative h-8 my-4 min-w-fit">
           <div className="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none w-full text-theme-800 dark:text-white" />
-          <input
+          <Combobox value={query} onChange={submitCallback}>
+            <Combobox.Input
               type="text"
               className="
               overflow-hidden w-full h-full rounded-md
@@ -129,7 +160,7 @@ export default function Search({ options }) {
               focus:border-theme-500 dark:focus:border-white/50
               border border-theme-300 dark:border-theme-200/50"
               placeholder={t("search.placeholder")}
-            onChange={(s) => setQuery(s.currentTarget.value)}
+              onChange={(event) => setQuery(event.target.value)}
               required
               autoCapitalize="off"
               autoCorrect="off"
@@ -137,6 +168,7 @@ export default function Search({ options }) {
               // eslint-disable-next-line jsx-a11y/no-autofocus
               autoFocus={options.focus}
             />
+
             <Listbox
               as="div"
               value={selectedProvider}
@@ -192,6 +224,30 @@ export default function Search({ options }) {
                 </Listbox.Options>
               </Transition>
             </Listbox>
+
+            {searchSuggestions[1]?.length > 0 && (
+              <Combobox.Options className="mt-2 rounded-md bg-theme-50 dark:bg-theme-800 border border-theme-300 dark:border-theme-200/50 cursor-pointer">
+                <div className="px-2 py-1 bg-white/50 dark:bg-white/10 text-theme-900 dark:text-white">
+                  <Combobox.Option key={query} value={query} />
+
+                  {searchSuggestions[1].map((suggestion) => (
+                    <Combobox.Option key={suggestion} value={suggestion} className="flex w-full">
+                      {({ active }) => (
+                        <span
+                          className={classNames(
+                            "px-1 rounded-md w-full",
+                            active ? "bg-theme-300/20 dark:bg-white/10" : "",
+                          )}
+                        >
+                          {suggestion}
+                        </span>
+                      )}
+                    </Combobox.Option>
+                  ))}
+                </div>
+              </Combobox.Options>
+            )}
+          </Combobox>
         </div>
       </Raw>
     </ContainerForm>