1 00:00:00,140 --> 00:00:00,440 Okay. 2 00:00:00,500 --> 00:00:06,620 And the last thing that I want to do in the search form is to add a dip bounce functionality to search 3 00:00:06,620 --> 00:00:07,320 input. 4 00:00:07,340 --> 00:00:08,620 So what am I talking about? 5 00:00:08,630 --> 00:00:14,720 Well, notice how pretty much every time I type a letter, we make a request and technically there's 6 00:00:14,720 --> 00:00:16,000 nothing wrong with that. 7 00:00:16,010 --> 00:00:20,570 But a better approach is to set up some kind of delay. 8 00:00:20,600 --> 00:00:25,370 So let the user type the letters and then make the request. 9 00:00:25,400 --> 00:00:30,710 Now, in my case, I believe I'll set it for two seconds, but of course you'll be able to control that. 10 00:00:30,710 --> 00:00:37,640 So if I navigate to complete project, notice how I'm able to type something and only then we make a 11 00:00:37,640 --> 00:00:38,420 request. 12 00:00:38,420 --> 00:00:42,620 And as a result, essentially we limit the amount of requests. 13 00:00:42,620 --> 00:00:43,820 And also. 14 00:00:44,600 --> 00:00:48,110 Well, the user experience, in my opinion, is better. 15 00:00:48,120 --> 00:00:48,680 Now. 16 00:00:48,680 --> 00:00:54,770 The bounce is a JavaScript principle and if you're not familiar with it. 17 00:00:54,770 --> 00:01:01,010 So if this is the first time you see it, I strongly suggest watching this video first where I cover 18 00:01:01,010 --> 00:01:08,660 everything step by step in the vanilla JS environment and effectively it's going to look like this. 19 00:01:08,660 --> 00:01:14,030 We're going to create a the bounce function, we'll invoke it right away. 20 00:01:14,030 --> 00:01:17,690 And then from this function we'll return another function. 21 00:01:17,960 --> 00:01:23,600 Now in the bounce, we'll actually pass in the onchange as a parameter. 22 00:01:23,630 --> 00:01:29,480 Notice over here I'm passing in the function and this is what I'm expecting here in the bounce and then 23 00:01:29,480 --> 00:01:35,420 in the function that I'm returning, I'll have a set timeout and I will invoke it. 24 00:01:35,980 --> 00:01:42,730 And we'll also utilize the timeout ID because we only want to invoke it. 25 00:01:43,420 --> 00:01:47,260 Two seconds after the last character was typed. 26 00:01:47,260 --> 00:01:53,690 So let's try to do everything step by step and hopefully I'm going to make myself clear. 27 00:01:53,710 --> 00:01:59,590 So first of all, let's navigate to Search Container and we want to set up that debounce. 28 00:01:59,590 --> 00:02:05,230 And right out of the gate, I can tell you that this debounce is only going to run once, basically 29 00:02:05,230 --> 00:02:07,750 only when we load the application. 30 00:02:07,810 --> 00:02:10,479 So we'll go here with Debounce. 31 00:02:10,600 --> 00:02:12,100 That's going to be my function. 32 00:02:12,100 --> 00:02:15,340 And right from this function I'll return another one. 33 00:02:16,170 --> 00:02:17,010 Over here. 34 00:02:17,010 --> 00:02:20,130 And let's just log something just so we can see what's happening. 35 00:02:20,130 --> 00:02:28,500 So we're going to go here with Log and then where I have the onchange, we will invoke the bounce like 36 00:02:28,500 --> 00:02:29,100 so. 37 00:02:29,100 --> 00:02:33,360 And what you're going to see that every time we'll change something about the search. 38 00:02:33,600 --> 00:02:34,440 We'll see. 39 00:02:35,260 --> 00:02:36,880 That hello in the console. 40 00:02:36,880 --> 00:02:38,710 So let's navigate back over here. 41 00:02:39,340 --> 00:02:46,090 Let me open up this one console and then notice again, don't worry about the requests and all that. 42 00:02:46,120 --> 00:02:53,170 The main point is that the bounce runs once once the application loads, but since we're returning the 43 00:02:53,170 --> 00:02:58,180 function pretty much when it comes to Onchange, this is what we're invoking. 44 00:02:58,180 --> 00:03:00,010 Hopefully that is clear. 45 00:03:00,250 --> 00:03:06,850 Now, since we're returning this function from the bounce, this is the function that actually has access 46 00:03:06,850 --> 00:03:08,410 to the event. 47 00:03:08,440 --> 00:03:09,550 Now, why do we need that? 48 00:03:09,550 --> 00:03:10,840 Well, because we need a form. 49 00:03:10,840 --> 00:03:11,410 Correct. 50 00:03:11,410 --> 00:03:12,700 So let's go over here. 51 00:03:12,700 --> 00:03:16,030 Let's set up the E, and then I'm going to go with const. 52 00:03:16,030 --> 00:03:23,650 Form is equal to event dot and then again current target because we will still submit the form just 53 00:03:23,650 --> 00:03:25,450 like we did previously. 54 00:03:25,630 --> 00:03:27,960 We'll only add the setTimeout. 55 00:03:27,970 --> 00:03:28,690 That's it. 56 00:03:28,780 --> 00:03:30,640 So we have the form. 57 00:03:30,670 --> 00:03:32,260 Okay, that's great. 58 00:03:32,290 --> 00:03:35,390 Now we want to pass in the Onchange. 59 00:03:35,390 --> 00:03:44,090 So essentially I want to pass in the function which is going to be invoked in those two seconds or whatever. 60 00:03:44,270 --> 00:03:49,340 So let's set up here a parameter and I'm going to call this onchange. 61 00:03:49,340 --> 00:03:56,620 And for now, again, we'll have something silly and we'll actually have the proper setup in a second. 62 00:03:56,630 --> 00:03:59,660 So here again, let's just go here with log. 63 00:04:00,680 --> 00:04:01,910 And we're going to type here. 64 00:04:01,910 --> 00:04:02,660 Hello. 65 00:04:03,290 --> 00:04:04,040 And you know what? 66 00:04:04,370 --> 00:04:07,970 We can also probably log the form if you want. 67 00:04:08,590 --> 00:04:11,780 So let's set up over here for. 68 00:04:12,130 --> 00:04:17,860 And then when it comes to on change, for now, I will invoke it directly here. 69 00:04:17,860 --> 00:04:19,540 So we'll go with On Change. 70 00:04:19,540 --> 00:04:21,250 And here we only have the log. 71 00:04:21,250 --> 00:04:25,090 So result is actually going to be pretty similar. 72 00:04:25,190 --> 00:04:32,530 We go back over here and then notice not only I get the form, but I also have this hello in a console. 73 00:04:32,950 --> 00:04:39,940 So long story short, we invoke the bounce once it returns a function. 74 00:04:40,940 --> 00:04:46,680 And in that function we invoke whatever we pass here as a parameter. 75 00:04:46,700 --> 00:04:50,000 So the only thing is missing is the timeout. 76 00:04:50,000 --> 00:04:57,950 But before we set up the timeout, let's actually see how we can pass this form into the on change. 77 00:04:57,980 --> 00:05:05,690 So the way that is going to look like I'll say that this function, the on change is looking for a parameter 78 00:05:05,690 --> 00:05:08,780 and the parameter name in my case is going to be form. 79 00:05:08,780 --> 00:05:13,730 And then I want to invoke, submit and pass in the form. 80 00:05:13,850 --> 00:05:19,020 So I'm looking for parameter and I'll invoke it here, submit form. 81 00:05:19,040 --> 00:05:24,610 Now, in order to access the form, we'll actually pass it here from the function we're returning. 82 00:05:24,620 --> 00:05:28,340 So instead of logging, I'll actually pass it down. 83 00:05:28,340 --> 00:05:30,820 So I know it looks a little bit funky. 84 00:05:30,830 --> 00:05:34,190 We have function inside of the function, then we're returning and all that. 85 00:05:34,190 --> 00:05:40,180 But essentially since I still want to have that controlled input setup, yes, this is what we do. 86 00:05:40,190 --> 00:05:46,800 So now there is a callback function which I invoke in a function that I'm returning and there I'm looking 87 00:05:46,800 --> 00:05:47,700 for a parameter. 88 00:05:47,700 --> 00:05:49,650 In my case, I'm going to call this form. 89 00:05:49,650 --> 00:05:52,950 And then as far as the functionality, I will invoke this submit. 90 00:05:52,980 --> 00:05:59,070 Now, in order to access the actual form, well, remember, it's over here where I have the event and 91 00:05:59,070 --> 00:06:02,250 that's why I pass it down and then invoke it. 92 00:06:02,250 --> 00:06:05,580 And then lastly, like I said, we want to set up that timeout. 93 00:06:06,120 --> 00:06:12,050 So essentially, I want to invoke this two seconds after the last keystroke. 94 00:06:12,060 --> 00:06:16,830 And in order to set that one up, we're going to go here with a timeout. 95 00:06:17,410 --> 00:06:19,690 And then we'll set it up. 96 00:06:19,870 --> 00:06:25,420 So we're going to go with timeout is equal to then set timeout. 97 00:06:26,300 --> 00:06:28,290 Let's pass in the callback function. 98 00:06:28,310 --> 00:06:33,200 Basically what we're going to invoke then comma, then like I said, in my case, I'm going to do it 99 00:06:33,200 --> 00:06:34,090 in two seconds. 100 00:06:34,100 --> 00:06:40,580 Now we want to invoke Onchange and since I want to clear that timeout every time user types something 101 00:06:40,580 --> 00:06:46,580 in input before the timeout, I'm going to go with clear timeout and I'll look for timeout. 102 00:06:47,560 --> 00:06:54,190 Effectively, every time we invoke set, timeout, we get back that ID and we can use that ID in order 103 00:06:54,190 --> 00:06:55,350 to clear it. 104 00:06:55,360 --> 00:06:59,230 So I'm clearing out the previous one and I'm setting up the new one. 105 00:06:59,230 --> 00:07:06,130 So essentially if there is no keystroke in two seconds after the last one, then we make the request. 106 00:07:06,130 --> 00:07:11,170 If there is another keystroke, then pretty much we start this from the scratch. 107 00:07:11,170 --> 00:07:13,690 So essentially if I navigate back to the browser. 108 00:07:16,330 --> 00:07:21,040 Notice I can keep typing, typing, typing, typing and only after the last keystroke. 109 00:07:21,070 --> 00:07:22,480 That's when we make the request. 110 00:07:22,510 --> 00:07:26,830 Now, of course, there are no jobs that match this nonsense, but. 111 00:07:27,580 --> 00:07:29,020 Hopefully that was clear. 112 00:07:29,140 --> 00:07:32,530 And with this in place now, we can start setting up the pagination.