diff --git a/src/components/widgets/search/search.jsx b/src/components/widgets/search/search.jsx
index 4a017d3f..414f38fc 100644
--- a/src/components/widgets/search/search.jsx
+++ b/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,84 +144,110 @@ 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
-            type="text"
-            className="
-            overflow-hidden w-full h-full rounded-md
-            text-xs text-theme-900 dark:text-white
-            placeholder-theme-900 dark:placeholder-white/80
-            bg-white/50 dark:bg-white/10
-            focus:ring-theme-500 dark:focus:ring-white/50
-            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)}
-            required
-            autoCapitalize="off"
-            autoCorrect="off"
-            autoComplete="off"
-            // eslint-disable-next-line jsx-a11y/no-autofocus
-            autoFocus={options.focus}
-          />
-          <Listbox
-            as="div"
-            value={selectedProvider}
-            onChange={onChangeProvider}
-            className="relative text-left"
-            disabled={availableProviderIds?.length === 1}
-          >
-            <div>
-              <Listbox.Button
-                className="
-          absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
-          text-white font-medium text-sm
-          bg-theme-600/40 dark:bg-white/10
-          focus:ring-theme-500 dark:focus:ring-white/50"
-              >
-                <selectedProvider.icon className="text-white w-3 h-3" />
-                <span className="sr-only">{t("search.search")}</span>
-              </Listbox.Button>
-            </div>
-            <Transition
-              as={Fragment}
-              enter="transition ease-out duration-100"
-              enterFrom="transform opacity-0 scale-95"
-              enterTo="transform opacity-100 scale-100"
-              leave="transition ease-in duration-75"
-              leaveFrom="transform opacity-100 scale-100"
-              leaveTo="transform opacity-0 scale-95"
+          <Combobox value={query} onChange={submitCallback}>
+            <Combobox.Input
+              type="text"
+              className="
+              overflow-hidden w-full h-full rounded-md
+              text-xs text-theme-900 dark:text-white
+              placeholder-theme-900 dark:placeholder-white/80
+              bg-white/50 dark:bg-white/10
+              focus:ring-theme-500 dark:focus:ring-white/50
+              focus:border-theme-500 dark:focus:border-white/50
+              border border-theme-300 dark:border-theme-200/50"
+              placeholder={t("search.placeholder")}
+              onChange={(event) => setQuery(event.target.value)}
+              required
+              autoCapitalize="off"
+              autoCorrect="off"
+              autoComplete="off"
+              // eslint-disable-next-line jsx-a11y/no-autofocus
+              autoFocus={options.focus}
+            />
+
+            <Listbox
+              as="div"
+              value={selectedProvider}
+              onChange={onChangeProvider}
+              className="relative text-left"
+              disabled={availableProviderIds?.length === 1}
             >
-              <Listbox.Options
-                className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
-              bg-theme-100 dark:bg-theme-600 shadow-lg
-              ring-1 ring-black ring-opacity-5 focus:outline-none"
+              <div>
+                <Listbox.Button
+                  className="
+                  absolute right-0.5 bottom-0.5 rounded-r-md px-4 py-2 border-1
+                  text-white font-medium text-sm
+                  bg-theme-600/40 dark:bg-white/10
+                  focus:ring-theme-500 dark:focus:ring-white/50"
+                >
+                  <selectedProvider.icon className="text-white w-3 h-3" />
+                  <span className="sr-only">{t("search.search")}</span>
+                </Listbox.Button>
+              </div>
+              <Transition
+                as={Fragment}
+                enter="transition ease-out duration-100"
+                enterFrom="transform opacity-0 scale-95"
+                enterTo="transform opacity-100 scale-100"
+                leave="transition ease-in duration-75"
+                leaveFrom="transform opacity-100 scale-100"
+                leaveTo="transform opacity-0 scale-95"
               >
-                <div className="flex flex-col">
-                  {availableProviderIds.map((providerId) => {
-                    const p = searchProviders[providerId];
-                    return (
-                      <Listbox.Option key={providerId} value={p} as={Fragment}>
-                        {({ active }) => (
-                          <li
-                            className={classNames(
-                              "rounded-md cursor-pointer",
-                              active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100",
-                            )}
-                          >
-                            <p.icon className="h-4 w-4 mx-4 my-2" />
-                          </li>
-                        )}
-                      </Listbox.Option>
-                    );
-                  })}
+                <Listbox.Options
+                  className="absolute right-0 z-10 mt-1 origin-top-right rounded-md
+                  bg-theme-100 dark:bg-theme-600 shadow-lg
+                  ring-1 ring-black ring-opacity-5 focus:outline-none"
+                >
+                  <div className="flex flex-col">
+                    {availableProviderIds.map((providerId) => {
+                      const p = searchProviders[providerId];
+                      return (
+                        <Listbox.Option key={providerId} value={p} as={Fragment}>
+                          {({ active }) => (
+                            <li
+                              className={classNames(
+                                "rounded-md cursor-pointer",
+                                active ? "bg-theme-600/10 dark:bg-white/10 dark:text-gray-900" : "dark:text-gray-100",
+                              )}
+                            >
+                              <p.icon className="h-4 w-4 mx-4 my-2" />
+                            </li>
+                          )}
+                        </Listbox.Option>
+                      );
+                    })}
+                  </div>
+                </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>
-              </Listbox.Options>
-            </Transition>
-          </Listbox>
+              </Combobox.Options>
+            )}
+          </Combobox>
         </div>
       </Raw>
     </ContainerForm>