Okay, so today, I'm going to begin working on a vastly improved instance search for the Laracast forum. But before I even get to the Laracast codebase, I want to review a tool, figure it out, get comfortable with it. So I'm going to be using the new Vue instance search Algolia component package. I saw this demoed at Laracon 17 by Maxime, who works at Algolia, and it was incredibly impressive. So I'm going to play around with it today. Beyond that demo on stage, I have no experience with this whatsoever. So hopefully it'll be fun if you want to come along.

Let's see what else. Okay, so here's what we need. So we're going to import Vue, and then we also need to import instanceSearch. So Vue instanceSearch is a handful of Vue-specific components for indexing, showing results, showing pagination, showing filtering, for any Algolia index that you have. So let's see if we can make this work. I'm going to go into my app.js file. We're kind of mixing require and import here, but it's fine just for the demo. This is just a brand new, fresh install of Laravel 5.5, by the way, so I haven't made any tweaks beyond this.

This is just a brand new, fresh install of Laravel 5.5, by the way, so I haven't made any tweaks beyond this. Okay, so you know what, let's just put this at the top for now. And then it's a Vue plugin, so we need to say, Vue, I want you to use instance search. Okay, what else needs to be done now? From now on, you can use all the Vue instance search components. Okay, so yeah, I think there, let's see, yeah, here's all the various components you can use, like showing the statistics. So when you search for something, it'll instantly show you 5,000 such and such results match your query.

So when you search for something, it'll instantly show you 5,000 such and such results match your query. Highlighting, patronation, refine, there's a lot of stuff here. The refinement list is especially impressive. But anyways, let's get back to it. So create your first search experience. Okay, so this is basically what we're going to have. So it looks like all of our Algolia components need to be wrapped in this root one here. So I think what I'm going to do to start is just steal that, and then I'm going to go to the welcome view that ships with Laravel.

So I think what I'm going to do to start is just steal that, and then I'm going to go to the welcome view that ships with Laravel. I have deleted some of the boilerplate, the styling that shows up on that homepage, but we'll just throw all of this in here instead. There we go. Okay, so you know what? Let's just view this in the browser and see what I get. All right, so right off the bat, you can see that we're using a, it looks like an example index. So we can see all the random stuff here.

best by index. So we can see all the random stuff here. So let's see how this works. So we have a search box. We have results. I'm not seeing the search box. Let's do this. View. Oh, and by the way, you may not be seeing this, but I did run npm run watch behind the scenes, so that's why it was already compiled.

Oh, and by the way, you may not be seeing this, but I did run npm run watch behind the scenes, so that's why it was already compiled. But if you're working along, make sure you do compile using mix or whatever you want to use. So just install your dependencies, npm run dev, and then you should be right along with me. But anyways, within our index, yeah, I do see the search box, but it's not showing up. What's in the console? CSRF token, that's fine. That's just a warning there.

search specific key. So make sure you don't do the secret key. You want the one that anyone can see. It's just a search only key. And then you specify the index that you want. All right. So then the search box represents that. Let's see. Yeah. And then I assume when you type into that, it fires an event that will perform an AJAX

Yeah. And then I assume when you type into that, it fires an event that will perform an AJAX request to Algolia. So let's see. If I do something like Sony, yeah, you can see there it immediately queries it. It sends back the results. And then let's see how we're filtering through it. So we have a component called AIS. So Algolia index search, is that what that stands for? Anyways.

So Algolia index search, is that what that stands for? Anyways. Results. And then we have a template where we're scoping the results. So I assume it's iterating through all of the results here. We're going to scope to a result so that we can access any of the properties here. And if you're not familiar with this, this is just destructuring. So I think it would be the same if we had like params or parameters. And then we said parameters.result. But here we're just doing destructuring to get that property out of it specifically.

And then we said parameters.result. But here we're just doing destructuring to get that property out of it specifically. Anyways. And then the attribute name is name. Let's see. So it's grabbing results. Yeah. It's grabbing that right there off of it. Okay. So you know what I want to do?

Okay. So you know what I want to do? Let's go into my API key section. And this is actually for Lerikas. So I don't think you can see anything too scary here. But the search only API key is fine because anyone could view the source and read that. So we're going to come back and I'm going to paste that in. I will get my app ID. And then the index name is form in this particular case. You can see I have various channels here.

And then the index name is form in this particular case. You can see I have various channels here. Okay. So actually, you know what I'm going to do? I'm going to delete that so we can do it together. Okay. Ignore that I just did that and then I'll explain it more. But anyways, we have our form and I want to query against that. So form. And let's come back.

So form. And let's come back. Let's close these two out. Refresh. What's going on? Oh, you know what I bet it is? It's because in the results, we're not trying to display the results, but I don't have an attribute called name. I have an attribute called title in this case. So why don't we do title and see if that works.

I have an attribute called title in this case. So why don't we do title and see if that works. There we go. Really cool. So these are like at the moment, these are live Livewire form results. So if I look for Lerikas, you can see how that goes. If I can say my own name, I can see anyone who's mentioned me within the title of a form thread. If we do Taylor Otwell, there you go. So now I believe if we switch back, we can use a component here to show the statistics.

If I look for something like valet, God, that just updates in real time. It's so easy. This is ridiculously cool. If you've ever had to implement this stuff from scratch, it's quite a bit of work and you probably won't do nearly as good a job as they've done for you out of the box. So I'm liking this. Now, if you're curious about the highlighting, so right here we're using the highlight component, but of course I believe we could just say v-text, result title, refresh. Yeah. And now we're not doing any highlighting.

Yeah. So whatever you search for, it wraps an M tag around it. So if I do vag, you can see that now the M tag just has that. And then of course at that point in your own site, you could do something like AIS highlight M, background is yellow. And now, yeah, any of our results will match up there, Laravel. And we see all those. And this always makes me laugh. You can just create forum threads with the title Laravel, like, okay, yeah, that's really useful.

So as you can see here, it allows us to display a dynamic list of filters to allow users to drill down into search results. So take a look. And the cool thing about this real quick is that you can, you can set anything. So you can push anything in your index. So in my particular case, I have a Conversation model. And then whether you're using Laravel Scout or your own implementation, if you want the channel to be an option there, like I have here, then you could just have in your indexable array section, just get the name of the channel. Even if you have to say like conversation->channel to use a basic Eloquent relationship.

array section, just get the name of the channel. Even if you have to say like conversation arrow channel to use a basic eloquent relationship and then the name. Yeah. It's just fine. Once you index it, it'll all go back up to Algolia and then you can now query against it and filter against it. So here's our channel. I'm going to save it. And so now that should be a filter that we can use.

And then we're going to do requests. Yeah. You can just see how quickly you can filter all of this stuff down to find exactly what you want. And then of course, within your result list, right now we're just displaying it in an H2, but of course we could link to it. So if we want something like this and then, yeah, we'll wrap this within an anchor tag. So what we want for the href, if we switch back, is I do index a path just for, that can be useful in some cases. So I could say result.path and let's bind to that.

can be useful in some cases. So I could say result.path and let's bind to that. Okay. But you know what? I think that may not work. Refresh. Let's take a look at these. Okay. So we do get the href, but it doesn't include the URL. So I think in this case, of course, it should fail.