It is great that we can show our users a list of results right here, but right now the results don't
really mean a lot.
It'll be great if the user could maybe click on one of these results and go to the corresponding Wikipedia
article.
That's we're going to add in this video.
We're going to show a little button on the right hand side that a user can click on to go to the official
Wikipedia article on computer programming.
Did you so let's flip back over to our editor.
I'm inside my search dog, J.S. File.
Now going to go down to where we render out our results.
Here it is right here.
First, to show a link on the right hand side of every search result inside of this First d'Hiv, the
right above, the one with a class name of content.
We will add in another div with the class name of right loaded content.
Well, then close the dive off.
And then inside there, we'll put in an anchor element and I'll give it some text like Go.
I'll give the anchor element a class name of UI button.
And let's now flip back over and to see what that looks like.
All right.
So that's the button the user is going to click on to go to the corresponding article.
Now, we just need to make sure that this anchor element as a link assigned to it or in a property.
I'm gonna give myself a little bit of space.
Arrigo.
And then I will assign in a draft property to get a U or L that the user can visit.
We're going to go to a very specially crafted you are l are just going to basically type it in.
This is just a little bit of trivia knowledge about how Wikipedia works.
We're going to do some string templating, which will require us to put in a set of curly braces.
The back ticks and then we will put in H TDP s colon slash slash e n Wikipedia dot org.
Then a question mark.
Do you, ah, I.D. equals.
And then we are going to do some string templating right there and put in the page I.D. or this particular
result.
That's how we go to a very particular page.
We essentially go to Wikipedia with a query string property of C, you are I.D. and then set that equal
to whatever the page I.D. is.
So inside there will put in results dot page I.D..
And once again, remember the response.
So we get back from Wikipedia has a lower case I.D. So we have put in age lowercase I.D. If you put
in Capital I or Capital D. It is not going to work correctly.
Let's save that.
Well, then flip back over.
Now, if I hover over any of these links or these buttons, you'll see on the very bottom left hand
corner of your browser, little preview page says that you're going to go to see where I.D..
Five three one one for this first article.
One, two, three, seven, seven one and so on that we can click on this and it will take us the appropriate
article.
There's computer programming, I can go back and try out program that works.
I can go to a functional programming.
Yep, that works.
And I think you get the idea.
It was looks pretty good.
Now, there's just one last thing that we need to take care of inside this project.
Remember, right now, whenever user types into that input, if they delete everything inside there,
you'll notice that we don't quite get a group good result back, as a matter of fact.
We get an error.
In addition, if we only delete a portion of that.
And then start to type inside for every character we press.
We are making one additional request.
This is extremely inefficient.
It would be a lot better if we could somehow just wait a little bit for easer to stop typing before
we actually do a search.
So those are two things we're going to fix up in the next video.