From 62a6f3d5e1d249f8d4e623d535a21748f6c98f76 Mon Sep 17 00:00:00 2001
From: mat <git@matdoes.dev>
Date: Fri, 22 Dec 2023 00:19:22 -0600
Subject: [PATCH] fix autocomplete to not receive requests out of order

---
 src/engines/answer/wikipedia.rs         |  2 +-
 src/engines/postsearch/docs_rs.rs       |  2 +-
 src/engines/postsearch/github.rs        |  2 +-
 src/engines/postsearch/stackexchange.rs |  2 +-
 src/engines/search/bing.rs              |  2 +-
 src/engines/search/brave.rs             |  2 +-
 src/engines/search/google.rs            |  2 +-
 src/web/assets/script.js                | 19 ++++++++++++++++---
 8 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/src/engines/answer/wikipedia.rs b/src/engines/answer/wikipedia.rs
index cf782d1..39212c4 100644
--- a/src/engines/answer/wikipedia.rs
+++ b/src/engines/answer/wikipedia.rs
@@ -1,7 +1,7 @@
 use std::collections::HashMap;
 
-use reqwest::Url;
 use serde::Deserialize;
+use url::Url;
 
 use crate::engines::{EngineResponse, CLIENT};
 
diff --git a/src/engines/postsearch/docs_rs.rs b/src/engines/postsearch/docs_rs.rs
index 41171e6..c5d509e 100644
--- a/src/engines/postsearch/docs_rs.rs
+++ b/src/engines/postsearch/docs_rs.rs
@@ -1,5 +1,5 @@
-use reqwest::Url;
 use scraper::{Html, Selector};
+use url::Url;
 
 use crate::engines::{Response, CLIENT};
 
diff --git a/src/engines/postsearch/github.rs b/src/engines/postsearch/github.rs
index 7f65261..54de75b 100644
--- a/src/engines/postsearch/github.rs
+++ b/src/engines/postsearch/github.rs
@@ -1,5 +1,5 @@
-use reqwest::Url;
 use scraper::{Html, Selector};
+use url::Url;
 
 use crate::engines::{Response, CLIENT};
 
diff --git a/src/engines/postsearch/stackexchange.rs b/src/engines/postsearch/stackexchange.rs
index 89e891a..54bdf82 100644
--- a/src/engines/postsearch/stackexchange.rs
+++ b/src/engines/postsearch/stackexchange.rs
@@ -1,5 +1,5 @@
-use reqwest::Url;
 use scraper::{Html, Selector};
+use url::Url;
 
 use crate::engines::{answer::regex, Response, CLIENT};
 
diff --git a/src/engines/search/bing.rs b/src/engines/search/bing.rs
index e90966f..5d19185 100644
--- a/src/engines/search/bing.rs
+++ b/src/engines/search/bing.rs
@@ -1,6 +1,6 @@
 use base64::Engine;
-use reqwest::Url;
 use scraper::{ElementRef, Selector};
+use url::Url;
 
 use crate::{
     engines::{EngineResponse, CLIENT},
diff --git a/src/engines/search/brave.rs b/src/engines/search/brave.rs
index 920f5f8..65a7cbb 100644
--- a/src/engines/search/brave.rs
+++ b/src/engines/search/brave.rs
@@ -1,4 +1,4 @@
-use reqwest::Url;
+use url::Url;
 
 use crate::{
     engines::{EngineResponse, CLIENT},
diff --git a/src/engines/search/google.rs b/src/engines/search/google.rs
index 50ce784..7869ca4 100644
--- a/src/engines/search/google.rs
+++ b/src/engines/search/google.rs
@@ -1,5 +1,5 @@
-use reqwest::Url;
 use scraper::{ElementRef, Selector};
+use url::Url;
 
 use crate::{
     engines::{EngineResponse, CLIENT},
diff --git a/src/web/assets/script.js b/src/web/assets/script.js
index 18a02c8..e355837 100644
--- a/src/web/assets/script.js
+++ b/src/web/assets/script.js
@@ -7,11 +7,15 @@ suggestionsEl.style.visibility = "hidden";
 searchInputEl.insertAdjacentElement("afterend", suggestionsEl);
 
 let lastValue = "";
+let nextQueryId = 0;
+let lastLoadedQueryId = -1;
 async function updateSuggestions() {
   const value = searchInputEl.value;
 
-  if (value.trim() === "" || value.length > 65) {
-    renderSuggestions([]);
+  if (value === "") {
+    suggestionsEl.style.visibility = "hidden";
+    nextQueryId++;
+    lastLoadedQueryId = nextQueryId;
     return;
   }
 
@@ -21,11 +25,20 @@ async function updateSuggestions() {
   }
   lastValue = value;
 
+  const thisQueryId = nextQueryId;
+  nextQueryId++;
+
   const res = await fetch(`/autocomplete?q=${encodeURIComponent(value)}`).then(
     (res) => res.json()
   );
   const options = res[1];
 
+  // this makes sure we don't load suggestions out of order
+  if (thisQueryId < lastLoadedQueryId) {
+    return;
+  }
+  lastLoadedQueryId = thisQueryId;
+
   renderSuggestions(options);
 }
 
@@ -135,7 +148,7 @@ searchInputEl.addEventListener("input", () => {
   updateSuggestions();
 });
 // and on focus
-searchInputEl.addEventListener("focus", updateSuggestions);
+searchInputEl.addEventListener("click", updateSuggestions);
 // on unfocus hide the suggestions
 searchInputEl.addEventListener("blur", (e) => {
   suggestionsEl.style.visibility = "hidden";