OK, so now we'll be creating such form or this search component.
And this would be responsible for basically searching.
OK.
Let us first create the UAE, then we'll trade dark logic at the above.
OK, so inside the written, I'll have a section.
First of all, we will remove this device and we'll have a section.
Election.
OK, so why it's not providing the clothing back, OK, it does so inside the section will be having
a form now form will be responsible for taking all of the input inside the form.
I'll be having a div.
And that they would be holding all of the label and the input.
OK, so we're having our day with the glass animal bomb control.
But as of now, we just give a tip.
But I'm thinking to give the glasses at the end.
First of all, let us see how it looks like without the spelling or not.
So here I'll give a label.
OK, label HD email four.
And how do you write the name?
And after the label will have then put food and how do you What?
Typist text.
And there will be some other things like I.D. and the name and on jeans and everything that will do.
But as of now, let us just see how this looks.
We need to import this inside our home component.
You go and.
Import this here inside this.
If.
Those from.
It give us auto import, and yes, it does.
And when I see it and when I go to the browser.
Well, that is my I was on.
Is my.
And find my brother.
Yeah, well, he had a very nasty.
So there is a small sized box that's a small input field because we have not yet given any styling to
it.
So that desired looks like this.
Let us give.
So when you go to this search long and hard for this section, we'll be giving last names.
Lastly, and that would be cool, too.
S. Search.
Or the form I'll be giving a to me.
Last name, that last name is equal to this search form.
Search and the poor.
Will also give some on some merit function to it, but as of now, we could do things step by step inside
the.
Will be having on the glass.
And that's going to be farm control.
And I lost my last name.
And that would be.
On.
And all.
And for the label it's already given on, let me see.
So you can see that is a beautiful search works here, and there doesn't feel that it was the magic
of our CSIS.
Let's go ahead and give some more functionality to it.
So first of all, we we'll import by a global context here.
So.
Really important importance on this really important to use.
This one.
Global context.
But on.
Next.
And next, we'll be importing are.
That said, basically not importing anything.
Well, next, we'll be setting the global context and context inside the search form function, who
will be setting it as a contest inside the curly braces.
We'll see this that aside form that.
The judge from.
That dumped I'm sorry, not done.
And that will grab from the U.S.
Floor can.
So that is it.
OK, I forgot to provide equal to his own.
Yeah, that is it.
We have grabbed the global context.
Start searched on what?
Next, we'll be giving concert so much value, and this is a venue basically, and this will restore
to the dome.
We'll be using use the roof.
On this story, I thought I'd use that.
And as of now, that's empty because there is no keyboard or there's no ring at the moment, which we
can assign to this.
OK.
But as of now, it's empty, and we'll provide a separate column here.
And next, we'll be giving some function to like just the water we type.
So for that?
What we'll do is we'll write some functions.
So first of all, we'll.
By the handle, Inge, who handles change would be inside the input.
One day on June two.
The handle change is right.
I will give that name, and that would be third in.
The cocktail is the name of the function and.
Inside this, what we'll do is we'll start the search.
To.
Good value.
Sergio Al-Udeid.
Current thought.
And we'll provide.
And thesis.
After that, we'll try to handle Summit Will, right?
Function and make.
We'll provide an argument that is.
And from here, we'll return a diet.
Reverend Default, you've the.
What this will do is it will prevent the page from reloading whenever we hit the enter button in the
input field, but that is very, very important.
The daughter in the flight.
And next, what we'll do is we'll create a news effect.
Why are you as a phone?
Because we want to like whenever we go to that particular website, for example, whenever I reload
this, I want the focus to be on this form on this input field.
That is what I want to do.
Before that, I'll be using you as the fact.
I can import it from here, or I can just try to get dirty with effect.
If you're if I'm using it for just one dime.
After discussing this on Stern Hill, right?
The act thought it was a fact.
And inside this, what will do is.
So that was astronaut square bracket.
OK.
Inside the use fact, what we'll do is set.
But it's done.
And here Will.
But not this, not true when you talk to when you.
Virtual value dot.
Surrendered focus.
And this is a function that will set the focus to that particular input, which is responsible for getting
the input from the user.
OK.
And that is it.
We will provide an empty array here.
No, this is the dependency area which is responsible for the execution of this particular function.
So this is their dependency.
And if it's empty, that means function will execute on when the injury lords.
Next, we'll be providing some functionality.
First of all, let us go to the form and here let us provide an on some mic.
On Summit, and here we'll provide handle some of the.
And next, we'll go to the input type, and here will do is, first of all, Typekit text means.
And.
I'd.
Is equal to fame.
Is equal to vote to a new vote, will you?
Next, we'll be having on change and change that will be equal to such bill.
But not value.
Surgical.
And I'll provide a place where live here.
Please hold up, and that will be equal to this urge for the dog, duck and David and I go to the browser.
First.
There's a problem, see, African text is not defined with.
Taken.
And.
That is because I forgot to declare that, so we like glanced at and text is equal to.
The thought.
Create context and then this when I save it and now when I go to the browser.
Yes, that is some that are still children is not defined.
Let me see what the spelling.
OK, the spelling was wrong, so let me correct it.
Yeah, save it.
I hope that works now.
Is this.
So now it works, we were having a small error that was just a typo.
And the next will be moving on to locating a surge functionality and you already actually added the
functionality, but to like display the vote results on the screen along with all the details from the
API.
So that will do in the next review.