Mercurial

comparison asyncio_threads/frontend/main.js @ 48:46daba6e3cf4

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