new: We now also autocomplete search queries using Google api

lscambo13 · Jan 29, 2024 · 69e51e1 · 69e51e1
1 parent 189be26
commit 69e51e1
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 18 deletions.
diff --git a/index.html b/index.html
@@ -17,8 +17,8 @@
       });
     }
   </script> -->
-	<link rel="manifest" href="manifest.json?v=1703602562290">
-	<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1703602562290">
+	<link rel="manifest" href="manifest.json?v=1703602562291">
+	<link rel="icon" type="image/x-icon" href="./favicon.ico?v=1703602562291">
 	<title>Search &bull; Casa Mia</title>
 	<meta name="theme-color" content="black">
 	<meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -29,10 +29,10 @@
 		  rel="stylesheet" />
 	<link rel="stylesheet" href="./icons.css" />
 	<link rel="stylesheet"
-		  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?v=1703602562290">
-	<link rel="stylesheet" href="./animations.css?v=1703602562290">
-	<link rel="stylesheet" href="./style.css?v=1703602562290" />
-	<script src="./index.js?v=1703602562290" type="module"></script>
+		  href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css?v=1703602562291">
+	<link rel="stylesheet" href="./animations.css?v=1703602562291">
+	<link rel="stylesheet" href="./style.css?v=1703602562291" />
+	<script src="./index.js?v=1703602562291" type="module"></script>
 </head>
 
 <body>

diff --git a/js_modules/search.js b/js_modules/search.js
@@ -1,4 +1,5 @@
 import {
+    clickToEnter,
     getSearchTerm,
 } from './utils.js';
 import {
@@ -16,6 +17,7 @@ import { Notify } from './utils/notifyDialog.js';
 const MSG = 'You must enter a search query to continue.';
 const container = document.querySelector('.autofillContainer');
 const searchBG = document.querySelector('#searchBarFocusMode');
+let myScript = '';
 
 function loadSearchDomain() {
     let domain = localStorage.getItem('default-search-url');
@@ -79,6 +81,7 @@ export function games() {
         Notify.show(MSG);
     }
 }
+
 export function ebooks() {
     let input = getSearchTerm().value;
     if (input != '') {
@@ -90,18 +93,43 @@ export function ebooks() {
     }
 };
 
+let returnedSuggestions = [];
+window.googleSuggestions = (data) => {
+    returnedSuggestions = [];
+    const inputQuery = getSearchTerm().value;
+    returnedSuggestions = data[1];
+    if (inputQuery) {
+        showAutofillBox(inputQuery, returnedSuggestions);
+        expandAutofill(inputQuery);
+        // console.log(returnedSuggestions);
+    }
+};
+
 export function processSearchboxInput(event) {
+    const oldInput = sessionStorage.getItem('input');
     const input = event.target.value;
     sessionStorage.setItem('input', input);
     switchToCLI(input);
     switchToURL(input);
     if (!input) {
+        clearSuggestions();
         setTimeout(() => {
             collapseAutofill();
         }, 1);
         return;
     }
-    showAutofillBox(input);
+    expandAutofill(input);
+    if (input != oldInput) googleAutocomplete(input);
+};
+
+const googleAutocomplete = (input) => {
+    if (myScript !== '') {
+        document.body.removeChild(myScript);
+    }
+    const provider = 'http://suggestqueries.google.com/complete/search?client=firefox&callback=googleSuggestions&q=';
+    myScript = document.createElement('script');
+    myScript.src = `${provider}${input}`;
+    document.body.appendChild(myScript);
 };
 
 const switchToCLI = (input) => {
@@ -113,6 +141,7 @@ const switchToCLI = (input) => {
         btnIcon.className = currentIcon;
     };
 };
+
 const switchToURL = (input) => {
     const btnIcon = document.getElementById('search-btn-icon');
     const currentIcon = localStorage.getItem('default-search-icon');
@@ -134,7 +163,7 @@ export const collapseAutofill = () => {
 
 const expandAutofill = (input) => {
     const autofillItems = document.querySelectorAll('.autofillItem');
-    if (autofillItems.length || input.length) {
+    if (input.length) {
         searchBG.style.display = 'block';
         setTimeout(() => {
             if (autofillItems.length) {
@@ -148,14 +177,14 @@ const expandAutofill = (input) => {
     }
 };
 
-const showAutofillBox = (input) => {
-    const clearSuggestions = () => {
-        const items = document.querySelectorAll('.autofillItem');
-        items.forEach((e) => {
-            e.remove();
-        });
-    };
+const clearSuggestions = () => {
+    const items = document.querySelectorAll('.autofillItem');
+    items.forEach((e) => {
+        e.remove();
+    });
+};
 
+const showAutofillBox = (input, cloudInput) => {
     input = input.toLowerCase();
     const db = JSON.parse(localStorage.getItem('autocompleteDatabase'));
     if (!db) localStorage.setItem('autocompleteDatabase', SAMPLE_AUTOFILL);
@@ -181,22 +210,31 @@ const showAutofillBox = (input) => {
         else container.style.flexDirection = 'column';
         let i = 0;
         for (const e of filteredArray) {
-            if (i == 10) return;
+            if (i == 6) break;
             container.insertAdjacentHTML('beforeend', `
 				<span 
                     class="autofillItem disable-select searchbox-style-${theme}"
                     tabindex="1" title="${e}">${e}</span>
             `);
             i++;
         }
+        for (const e of cloudInput) {
+            if (i == 10) break;
+            container.insertAdjacentHTML('beforeend', `
+        		<span 
+                    class="autofillItem disable-select searchbox-style-${theme}"
+                    tabindex="1" title="${e}">${e}</span>
+            `);
+            i++;
+        }
     };
 
     generateSuggestions(filteredArray);
-    expandAutofill(input);
     const items = document.querySelectorAll('.autofillItem');
     items.forEach((e) => {
         e.addEventListener('click', autofill);
-        e.addEventListener('focus', autofill);
+        // e.addEventListener('focus', autofill);
+        e.addEventListener('keydown', clickToEnter);
     });
 };