Mercurial

annotate asyncio_threads/frontend/main.js @ 198:008ca7780c8a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
S3 upload got it to work.
author MrJuneJune <me@mrjunejune.com>
date Sat, 14 Feb 2026 16:18:14 -0800
parents 46daba6e3cf4
children
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
48
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 // Develop a TypeAhead input component that filters a dataset based on user entry. Implement a debounce mechanism to optimize performance by limiting the frequency of function execution during typing. Apply text processing logic to identify and visually highlight the specific substrings within the results that match the user's input.
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 //
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 // 3. text processing logic which ones...
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 let previousId = 0;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 const inputEle = document.getElementById("search");
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 const divSuggestion = document.getElementById("suggestion");
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 const tries = {}
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 const userNames = [
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 "Ephemeral",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 "Mellifluous",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 "Ubiquitous",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 "Voracious",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17 "Serendipity",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 "Quixotic",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 "Languid",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 "Ephemeral",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 "Susurrus",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 "Ebullient",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 "Petrichor",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 "Ineluctable",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 "Platitude",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 "Ennui",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27 "Axiom",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 "Cacophony",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 "Halcyon",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 "Ineffable",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 "Juxtapose",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 "Lugubrious",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 "Nefarious",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 "Ostracize",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 "Pernicious",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 "Ruminate",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 "Solipsism",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 "Taciturn",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 "Wanderlust",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40 "Zephyr",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 "Discombobulate",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 "Esoteric",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 "Incendiary",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 "Kudos",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 "Misanthrope",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 "Pensive",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 "Quagmire",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 "Ramify",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49 "Stymie",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 "Unctuous",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 "Vex",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 "Wistful",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 "Banal",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 "Dichotomy",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 "Fecund",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 "Garrulous",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 "Hegemony",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 "Imbroglio",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 "Knell",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 "Mirth",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 "Obfuscate",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62 "Parsimonious",
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 ]
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 function createTries(word) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 curr = tries
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 for (let letter of word.toLowerCase()) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 if (!curr[letter]) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 curr[letter] = {};
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71 if (!curr[letter]["#"]) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 curr[letter]["#"] = []
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 curr[letter]["#"].push(word)
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 } else {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 curr[letter]["#"].push(word)
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 curr = curr[letter];
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 userNames.forEach((word) => createTries(word));
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 function findWord(word) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 const results = new Set()
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87 function dfs(currTries, currWordPosition, fuzz_search, curr_sequential, max_sequential = 0) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88 if (currWordPosition === word.length || fuzz_search > 1) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 console.log(currTries, currWordPosition, fuzz_search, curr_sequential, max_sequential)
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 if (max_sequential >= 2) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 currTries['#'].forEach((word) => results.add(word));
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 console.log("hello")
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 return;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 letter = word[currWordPosition].toLowerCase();
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 Object.keys(currTries).forEach((key) => {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98 if (key === '#') return;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 dfs(currTries[key],
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 currWordPosition + 1,
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 (key != letter) ? fuzz_search + 1 : fuzz_search,
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 (key == letter) ? curr_sequential + 1 : 0,
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 Math.max((key == letter) ? curr_sequential + 1 : 0, max_sequential)
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 );
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 })
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 dfs(tries, 0, 0, 0)
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 return results;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 function populateSuggestions(inputValue) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 const words = findWord(inputValue);
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 divSuggestion.innerHTML = "";
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 for (let word of words) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 let res = "";
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 const lowerInput = inputValue.toLowerCase();
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 for (let letter of word) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 if (lowerInput.includes(letter.toLowerCase())) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 res += `<span style="color: red;">${letter}</span>`;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 } else {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 res += letter;
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 divSuggestion.innerHTML += res + "<br>";
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 let i = 0
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 inputEle.addEventListener('keypress', () => {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 if (previousId) {
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 clearTimeout(previousId);
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 }
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 previousId = setTimeout(() => populateSuggestions(inputEle.value), 500); // 1, 2, 3
46daba6e3cf4 Few python scrtips to show how to use asychio.
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 })