Client-side searches, continued

- [Instructor] All right, so in our previous video, we actually got our client-side search working. It didn't look like much, I understand, but it was working. As you typed, you got instant search results and it displayed all the results back that were hits on your search results sorted in order. So, everything was working as we left in the last video. Now this video, the goal is to make this look a lot better, make it look similar to our server-side experience. We're gonna make this look a lot better to the front-end users to really impress them. That's gonna be the goal of this video and that's gonna wrap up section two, Laravel Scout. So let's go ahead and dive into this and make this search result look so much better. We're gonna start off by styling the input field. That's gonna be super simple. And then we'll go through and style the results. We're basically creating a loop in the results and we're going to copy what we did in the server side. We'll use the server side as inspiration and then go through and do the Vue.js version of what we did on the server side. And then we'll go ahead and test it and display the results as we type. Let's go ahead and do this. We'll jump over into our project now and go ahead and get started. Here we are where we left off in the previous video. Now, I just wanted to, this is bothering me, but we're gonna just change the indent here. The first thing we wanna do is let's start with this input. This input is just a Vue.js component, but it's actually, at its core, still an HTML component, so we can still treat it like an HTML component. And so, one way we can do that is basically just add a class to it. We can add the exact same classes that the other component had. It had form-control, if you remember right, and it also had input-lg for input large. We can actually add these exact same classes to it and treat it exactly like an HTML component. That's one of the things that makes Vue.js components so awesome to work with. Let's go ahead and save this and actually look at this in the browser to see what it looks like. Here we go, we can see we have Search for Posts and now we've got a beautiful little search bar. So now, this looks good. You can see the placeholder text looks good. We have a full length search bar. Now, we could add the button if we wanted but because as we type, we're going to be getting, as we type, we're not gonna be, meaning to tap, like press Enter. It actually, the results appear as we type. So, that's why we wanna go ahead and just do those. We don't really need a search bar but you could do that. In order to do that, all you would need to do is just wrap this with your input group and then add it and just treat this like a normal HTML component that represented that input field. I mean, you could still do it if you'd like to, but we're not gonna worry too much about it. So, now that we've got that, the next point to tackle is the results. Here we have our Algolia InstantSearch results and we can go ahead and customize these in here as well. Everything inside of here is how it's going to display to the users, so we can go ahead and open this up. And what we're actually gonna do here is create a template. This template is going to tell the component, basically, how to handle every search result that we get. We're gonna scope this and we're going to say scope="{result}" and then close this off. And then we can go ahead and put some HTML in here and that HTML will act as a template for every individual result that we get. So, when we look over here, each of these is a result. See, this is one result. Actually, that's a result, and then that's a result, and then that's a result, and so forth. So, we wanna tell it how to handle every single result. It's already looping through every result but it's just displaying 'em at a very basic level, so we wanna basically expand upon that. That's what we're gonna do inside of here. So, as I mentioned, we wanna copy what we did in the server-side one and that's why I commented it out instead of deleting it down here. Let's go ahead and cut this out and we're gonna paste it inside of our template, and there we go. So now, we should get the general look of it but we will still get some problems because this post variable doesn't exist, these if statements aren't gonna work either, and things like that. This isn't gonna work either. So, let's go through this and clean it up and make it work with Vue. Here we've just got some basic HTML that's gonna work good. Here we've got our eight-column grid. Inside of here, we have our title and our anchor tag. Now, let's start by looking at the title text. We can change this really easy. Instead of grabbing $post->title, we can actually just grab result.title. We can reference the current result we're on by using this result tame, so we can just call result.title. And then everything inside of here, it's looping through it. If you think about, this is the beginning of the loop. Everything inside of here, we're just looping through and the current iteration is gonna be represented as results, so we can use result.title, result.id, result.published, and so forth. Now, the other thing is we've got double curly braces here and Laravel's gonna try to pick this up and try to process this and cause a problem, so we need to tell Laravel to ignore it. And so, what we do is we add an at sign before it. And you can see here, it cancels it out, and then what's gonna happen is now Vue.js can handle this and it will render it as the name of the title of the current result we're on. All right, so that's gonna look good for the title. Now we've got this anchor tag here. How do we handle this anchor tag? This anchor tag is gonna be a little more complicated. We have to create this route, which is basically our URL /posts/ and then the current id of the post, so we're gonna need to create that for each individual timely loop through it. So, we're gonna have to start from scratch. Let's come back down here, and what we're gonna do is we're going to add a colon before href because what that tells Vue.js to do is to process what's inside of these quotes like it's a JavaScript function. And then we're gonna go ahead and create that JavaScript function that we want it to run. We're going to create a relative URL and we're gonna concatenate two elements together. We're gonna concatenate a string that's simply /posts/, and that's our string, and then we're going to add a plus to concatenate. And then we're gonna add the result.id, so we're gonna grab this, grab the id from that result, and attach it to the end of this string, which is /posts/. So, the result should be /posts/10 or something like that. And then that is going to be evaluated as a function and then rendered inside of these quotes as href. So, that is going to be able to dynamically create that URL for us. And then we've got our title here being dynamically created, so we're basically good for the title here. Then down here, we've got some if statements. These are gonna cause problems because it's laid in not Vue.js. So here, we have $post->published. All we need to do is do changes to result published but we can't really do if statements like this, so what we're going to do is do it the Vue.js way. Let's go ahead and get rid of all this else stuff and this endif. And then for these two h tags, we can still run an if statement but we do it inside of the tag. So, here for h4, we're gonna v-if="result.published", and if that evaluates to true, then it's gonna go ahead and display that h4 tag. We'll do the opposite here. We're just gonna do v-if="!result.published", and then it will show that if it's not published. So, there we go, that one should work good. And then down here, we get to the bottom, we have just the paragraph tag and we are concatenating it, and you could concatenate it with Vue.js. You would have to make a method to do that and run it through the method. And so, we're not gonna worry about that right now, but it's definitely possible. So, what you would just need to do here is just result.content, and that's gonna go ahead and display the content inside this paragraph tag. And there we go, we should be done. What's gonna happen now is every result that is returned is gonna get thrown through this template. And so, we're gonna get this response here for every single result that gets returned back to us. So, it's kind of like processing a loop. Let's go now and take a look in the browser. Let's refresh, and there we go. We're getting that same look that we got when we were working on the server side. We've been able to emulate that server-side look but using JavaScript. And as we type, you can see that the results change immediately. We get immediate changes. It's a full-page search experience and it looks really, really good. Now, this looks even better if we actually have real words. I think Algolia's struggling to try to figure out some of these Latin words and how to search, and it's doing typo correction stuff. So, I think some of that's gonna cause a little bit of a problem but once you start getting real posts in here, it's gonna look really, really good. And if we click any of these, we go to that post because for each of these, we've dynamically created that URL as well. So, that is basically full-page, live search on the client side. As we type here, there is no page refreshes or anything. All this happens live. It's an incredible search experience. So, that basically wraps up Laravel Scout. Laravel Scout is how we index and display search results to the user. We can do it server-side, client-side. There's a lot of great functionality that we can do. So, throughout this section starting off by configuring and installing Laravel Scout. Next, we went ahead to also set up this brand new blog project. Next, we went ahead and talked about Algolia and how search works. We set up a free Algolia search account and index, and see how that works and how we can maintain our search index. We went ahead and actually make our posts and our users searchable so that we'll be able to run searches on it. And talked about how we run the searches themselves. We can do server-side searches with PHP. We'll show you how to do that. And then we went ahead and finished off the series, creating a client-side searching application where we can run searching on the client-side using JavaScript and see those updates immediately without it refreshing the browser or anything like that. So hopefully you enjoyed using Laravel Scout, and you can see how easy it is to get up and running, and you can add it to your next application. So now, in the next section, we're gonna be starting another Laravel package called Laravel Cashier. This is gonna be a package that allows you to accept payments online. Of course, you're going to want to accept payments at some point, so it's gonna be a valuable one for everybody. I'll see you guys in the next section where we take on and learn this super valuable official package.