Making a JS search bar work with suggestions -- need some help

Question

I've been working on this for hours and hours. Spent all day today. And I'm getting no where. So I'm finally just gonna ask..

I'm trying to make a search bar with suggestions -- like google does. when you type something it displays some suggestions, when you click on the suggestion it opens up a page.

I have put comments on the code to guide you through what I'm doing in the code.
https://code.sololearn.com/W7A2136A1a1A

Answer 1

I've explained the problems and suggested a fix in the following code (from line 59)

https://code.sololearn.com/WFbkRAn6QwvG/?ref=app

Answer 2

Ginfio the [] is a syntax for array destructuring. You'll understand better with an example, assume there is an array `arr`
const arr = [1, 2, 3]
Now, if I have three variables x, y, z
var x, y, z;
I want to give `x` the value of arr[0], `y` tha value of arr[1] and `z` the value of arr[2], before 2015 I would need to do
x = arr[0]
y = arr[1]
z = arr[2];
but after ES6 was released in 2015, I can simply do
[x, y, z] = arr
now x = 1, y = 2, z = 3

You haven't completed the JS course yet, but it is there
https://www.sololearn.com/learning/2977/

Now you can also use this syntax for function arguments. Example
function sum([x, y]) {
return x + y
}
var arr = [1, 2]
sum(arr)
// inside the function, x = arr[0] = 1 and y = arr[1] = 2

([link, title]) => {}
is a short form of a function definition and is the same as
function([link, title]) => {}

It is there in the SL course too (see page 2)
https://www.sololearn.com/learning/2970/

Happy coding!

Answer 3

XXX I read all your comments. very interesting.

I wrote all that code, and you were able to do it with a few lines.😮

It made me smile. i was like .. //wow.

in ur code:
jx = splitted.map(([link, title]) => {
return `<a href="${link}" class="suggested">${title}</a>`
})

whats [] doing btw? is that the part that loops/iterates?

Answer 4

XXX that makes sense. learnt something new.

I’ll be looking at the SL course, ES6

Thank You!!

Answer 5

Amazing