fix autocomplete to not receive requests out of order
This commit is contained in:
parent
a3fd03d584
commit
62a6f3d5e1
@ -1,7 +1,7 @@
|
||||
use std::collections::HashMap;
|
||||
|
||||
use reqwest::Url;
|
||||
use serde::Deserialize;
|
||||
use url::Url;
|
||||
|
||||
use crate::engines::{EngineResponse, CLIENT};
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
use reqwest::Url;
|
||||
use scraper::{Html, Selector};
|
||||
use url::Url;
|
||||
|
||||
use crate::engines::{Response, CLIENT};
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
use reqwest::Url;
|
||||
use scraper::{Html, Selector};
|
||||
use url::Url;
|
||||
|
||||
use crate::engines::{Response, CLIENT};
|
||||
|
||||
|
@ -1,5 +1,5 @@
|
||||
use reqwest::Url;
|
||||
use scraper::{Html, Selector};
|
||||
use url::Url;
|
||||
|
||||
use crate::engines::{answer::regex, Response, CLIENT};
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
use base64::Engine;
|
||||
use reqwest::Url;
|
||||
use scraper::{ElementRef, Selector};
|
||||
use url::Url;
|
||||
|
||||
use crate::{
|
||||
engines::{EngineResponse, CLIENT},
|
||||
|
@ -1,4 +1,4 @@
|
||||
use reqwest::Url;
|
||||
use url::Url;
|
||||
|
||||
use crate::{
|
||||
engines::{EngineResponse, CLIENT},
|
||||
|
@ -1,5 +1,5 @@
|
||||
use reqwest::Url;
|
||||
use scraper::{ElementRef, Selector};
|
||||
use url::Url;
|
||||
|
||||
use crate::{
|
||||
engines::{EngineResponse, CLIENT},
|
||||
|
@ -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";
|
||||
|
Loading…
Reference in New Issue
Block a user