fix autocomplete to not receive requests out of order

This commit is contained in:
mat 2023-12-22 00:19:22 -06:00
parent a3fd03d584
commit 62a6f3d5e1
8 changed files with 23 additions and 10 deletions

View File

@ -1,7 +1,7 @@
use std::collections::HashMap;
use reqwest::Url;
use serde::Deserialize;
use url::Url;
use crate::engines::{EngineResponse, CLIENT};

View File

@ -1,5 +1,5 @@
use reqwest::Url;
use scraper::{Html, Selector};
use url::Url;
use crate::engines::{Response, CLIENT};

View File

@ -1,5 +1,5 @@
use reqwest::Url;
use scraper::{Html, Selector};
use url::Url;
use crate::engines::{Response, CLIENT};

View File

@ -1,5 +1,5 @@
use reqwest::Url;
use scraper::{Html, Selector};
use url::Url;
use crate::engines::{answer::regex, Response, CLIENT};

View File

@ -1,6 +1,6 @@
use base64::Engine;
use reqwest::Url;
use scraper::{ElementRef, Selector};
use url::Url;
use crate::{
engines::{EngineResponse, CLIENT},

View File

@ -1,4 +1,4 @@
use reqwest::Url;
use url::Url;
use crate::{
engines::{EngineResponse, CLIENT},

View File

@ -1,5 +1,5 @@
use reqwest::Url;
use scraper::{ElementRef, Selector};
use url::Url;
use crate::{
engines::{EngineResponse, CLIENT},

View File

@ -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";