Okay.
And the last thing that I want to do in the search form is to add a dip bounce functionality to search
input.
So what am I talking about?
Well, notice how pretty much every time I type a letter, we make a request and technically there's
nothing wrong with that.
But a better approach is to set up some kind of delay.
So let the user type the letters and then make the request.
Now, in my case, I believe I'll set it for two seconds, but of course you'll be able to control that.
So if I navigate to complete project, notice how I'm able to type something and only then we make a
request.
And as a result, essentially we limit the amount of requests.
And also.
Well, the user experience, in my opinion, is better.
Now.
The bounce is a JavaScript principle and if you're not familiar with it.
So if this is the first time you see it, I strongly suggest watching this video first where I cover
everything step by step in the vanilla JS environment and effectively it's going to look like this.
We're going to create a the bounce function, we'll invoke it right away.
And then from this function we'll return another function.
Now in the bounce, we'll actually pass in the onchange as a parameter.
Notice over here I'm passing in the function and this is what I'm expecting here in the bounce and then
in the function that I'm returning, I'll have a set timeout and I will invoke it.
And we'll also utilize the timeout ID because we only want to invoke it.
Two seconds after the last character was typed.
So let's try to do everything step by step and hopefully I'm going to make myself clear.
So first of all, let's navigate to Search Container and we want to set up that debounce.
And right out of the gate, I can tell you that this debounce is only going to run once, basically
only when we load the application.
So we'll go here with Debounce.
That's going to be my function.
And right from this function I'll return another one.
Over here.
And let's just log something just so we can see what's happening.
So we're going to go here with Log and then where I have the onchange, we will invoke the bounce like
so.
And what you're going to see that every time we'll change something about the search.
We'll see.
That hello in the console.
So let's navigate back over here.
Let me open up this one console and then notice again, don't worry about the requests and all that.
The main point is that the bounce runs once once the application loads, but since we're returning the
function pretty much when it comes to Onchange, this is what we're invoking.
Hopefully that is clear.
Now, since we're returning this function from the bounce, this is the function that actually has access
to the event.
Now, why do we need that?
Well, because we need a form.
Correct.
So let's go over here.
Let's set up the E, and then I'm going to go with const.
Form is equal to event dot and then again current target because we will still submit the form just
like we did previously.
We'll only add the setTimeout.
That's it.
So we have the form.
Okay, that's great.
Now we want to pass in the Onchange.
So essentially I want to pass in the function which is going to be invoked in those two seconds or whatever.
So let's set up here a parameter and I'm going to call this onchange.
And for now, again, we'll have something silly and we'll actually have the proper setup in a second.
So here again, let's just go here with log.
And we're going to type here.
Hello.
And you know what?
We can also probably log the form if you want.
So let's set up over here for.
And then when it comes to on change, for now, I will invoke it directly here.
So we'll go with On Change.
And here we only have the log.
So result is actually going to be pretty similar.
We go back over here and then notice not only I get the form, but I also have this hello in a console.
So long story short, we invoke the bounce once it returns a function.
And in that function we invoke whatever we pass here as a parameter.
So the only thing is missing is the timeout.
But before we set up the timeout, let's actually see how we can pass this form into the on change.
So the way that is going to look like I'll say that this function, the on change is looking for a parameter
and the parameter name in my case is going to be form.
And then I want to invoke, submit and pass in the form.
So I'm looking for parameter and I'll invoke it here, submit form.
Now, in order to access the form, we'll actually pass it here from the function we're returning.
So instead of logging, I'll actually pass it down.
So I know it looks a little bit funky.
We have function inside of the function, then we're returning and all that.
But essentially since I still want to have that controlled input setup, yes, this is what we do.
So now there is a callback function which I invoke in a function that I'm returning and there I'm looking
for a parameter.
In my case, I'm going to call this form.
And then as far as the functionality, I will invoke this submit.
Now, in order to access the actual form, well, remember, it's over here where I have the event and
that's why I pass it down and then invoke it.
And then lastly, like I said, we want to set up that timeout.
So essentially, I want to invoke this two seconds after the last keystroke.
And in order to set that one up, we're going to go here with a timeout.
And then we'll set it up.
So we're going to go with timeout is equal to then set timeout.
Let's pass in the callback function.
Basically what we're going to invoke then comma, then like I said, in my case, I'm going to do it
in two seconds.
Now we want to invoke Onchange and since I want to clear that timeout every time user types something
in input before the timeout, I'm going to go with clear timeout and I'll look for timeout.
Effectively, every time we invoke set, timeout, we get back that ID and we can use that ID in order
to clear it.
So I'm clearing out the previous one and I'm setting up the new one.
So essentially if there is no keystroke in two seconds after the last one, then we make the request.
If there is another keystroke, then pretty much we start this from the scratch.
So essentially if I navigate back to the browser.
Notice I can keep typing, typing, typing, typing and only after the last keystroke.
That's when we make the request.
Now, of course, there are no jobs that match this nonsense, but.
Hopefully that was clear.
And with this in place now, we can start setting up the pagination.