autofill

src/pages/Home.tsx

@@ -3,11 +3,27 @@ import { useTranslation } from "react-i18next";
 import { HeaderRoute } from "../components/HeaderRoute";
 import { enc } from "../aes";
 import CloakedHead from "../util/CloakedHead";
+
 export function Home() {
   const [isFocused, setIsFocused] = useState(false);
+  const [showSuggestions, setShowSuggestions] = useState(false);
   const [inputValue, setInputValue] = useState("");
+  const [suggestions, setSuggestions] = useState([]);
   const { t } = useTranslation();
 
+  const handleInputChange = async (event) => {
+    setInputValue((event.target as HTMLInputElement).value);
+    const newQuery = event.target.value;
+    setInputValue(newQuery);
+
+    const response = await fetch(`/search=${newQuery}`).then((res) =>
+      res.json()
+    );
+
+    const newSuggestions = response?.map((item) => item.phrase) || [];
+    setSuggestions(newSuggestions);
+  };
+
   const handleSubmit = (event) => {
     event.preventDefault();
     window.location.href =
@@ -38,25 +54,52 @@ export function Home() {
         </a>
         <form
           onSubmit={handleSubmit}
-          class="flex h-full w-full items-center justify-center"
+          class="flex h-full w-full flex-col items-center justify-center"
         >
           <input
             onFocus={() => {
+              setShowSuggestions(true);
               setIsFocused(true);
             }}
             onBlur={() => {
               setIsFocused(false);
+              setTimeout(() => {
+                setShowSuggestions(false); // delay so the user has time to click suggestions
+              }, 200);
             }}
             type="text"
             value={inputValue}
-            onChange={(e) =>
+            onChange={handleInputChange}
-              setInputValue((e.target as HTMLInputElement).value)
-            }
             className={`font-roboto h-14 rounded-2xl border border-input-border-color bg-input p-2 text-center text-xl placeholder:text-input-text focus:outline-none ${
               isFocused ? "w-10/12 md:w-3/12" : "w-80"
             } transition-all duration-300`}
             placeholder={isFocused ? "" : t("home.placeholder")}
           />
+          <div class="relative flex w-10/12 flex-col items-center md:w-3/12">
+            <div class="absolute text-center">
+              {showSuggestions &&
+                suggestions.map((suggestion, index) => (
+                  <a
+                    href={
+                      "/go/" +
+                      encodeURIComponent(
+                        //@ts-ignore
+                        enc(
+                          suggestion,
+                          window.location.origin.slice(8) + navigator.userAgent
+                        ).substring(10)
+                      )
+                    }
+                  >
+                    <div key={index}>{suggestion}</div>
+                  </a>
+                ))}
+              {/*} {isFocused &&
+                Array.from({ length: 5 }, (_, index) => (
+                  <div key={index}>Example suggestion</div>
+                ))} */}
+            </div>
+          </div>
         </form>
       </div>
     </HeaderRoute>

src/routes.tsx

@@ -6,6 +6,7 @@ import { ProxyFrame } from "./pages/ProxyFrame.js";
 import { Radon } from "./pages/Radon";
 import { Settings } from "./pages/Settings/";
 import { AboutBlank } from "./AboutBlank";
+import AutocompleteInput from "./Autocomplete";
 import "./style.css";
 import "./themes/main.css";
 import "./i18n";