Indexing data with Laravel Scout: Dropdown Autocomplete Search Anything in Laravel

00:11

that we're going to be using is MeliSearch. Just because we can install this locally, it works like all of the other third-party search engines that are paid services that we can use.

00:23

But this just means that we can quickly get set up with searching. And then with Laravel Scout and anything else, just really easily switch over later.

00:30

So we're going to talk about a few things. We're going to talk about MeliSearch. We're going to talk about Laravel Scout. And then we are going to index this data.

00:39

Now, the difference between MeliSearch, which is our search engine, and Laravel Scout, if you've never worked with it, is Laravel Scout is like an interface that

00:49

allows you to take your models within your Laravel application. So we have a user and a course. And define how they're going to look within the search engine

00:58

itself. Then with Laravel Scout, we can run a command that will push all of our data over to our search engine.

01:07

And then on the client side, we can interact directly with our search engine where we have it installed on our local machine. So the first thing that you need to do

01:17

is go ahead and install MeliSearch. Now, there's a ton of different ways that we can do this, depending on your operating system and how you work.

01:24

You can download it just with curl. You can use Homebrew. You can build it from source. And there's even directions for Windows as well.

01:31

So go ahead and follow this. Now, once you have installed MeliSearch, you should be able, within your command line, within your project, be able to just run the MeliSearch

01:44

command. And what that's going to do is it's going to create some files locally within your project, which are your index files, so

01:51

all of the data that you actually store in here. And it's going to run the server as well. So you can see, if I run MeliSearch now, that is now hanging.

01:58

And a MeliSearch survey is now running. So as long as you can do this, you're pretty much good to go. Now, once you have run this command, if you just head up here to the point

02:07

where this server is listening, you can actually go ahead and open this in your browser, which is what we saw from the introduction. And you can choose the index.

02:14

Now, at the moment, we don't have any indexes. Indexes are the types of data you're storing. So we're going to end up with two indexes, users and courses. We're going to leave this open, because once we

02:25

have installed Laravel Scout and actually indexed our data, we will see this data in here. And we can even start to search on it and just verify that everything looks good.

02:33

So we'll leave that up. And we're going to go ahead and talk about Laravel Scout. So before we do anything, let's just make sure that we're properly set up within our project.

02:42

I'm going to go ahead and run npm run dev in here to build all of our assets, since we are eventually going to be building with view. And I'm just going to move everything over

02:52

so we have a nice view of our command so we can go ahead and just start to type stuff out. OK, so let's go ahead and get Laravel Scout installed. So let's go to the installation section.

03:03

The first thing to do is pull in the Laravel Scout package. That kind of makes sense. And then what we want to do is publish the configuration, which we're not really going to touch,

03:13

but we can do if we need to. And then we need to add the searchable trait to all of the models that we want to be searchable. So in this case, it's going to be users and courses.

03:22

Now, before we do that, it's really important to just do a little bit of configuration based on the driver that we're going to be using. Now, Algolia is a third-party search engine solution,

03:32

which you can push data to. This is a paid solution, unless you have a free plan. Metasearch is what we're using. And there's a couple of other third-party plugins

03:41

for this that you can use. But we're using Metasearch here. So before we do anything like start to actually push our data,

03:48

we need to make sure we configure this properly. So we're going to go ahead and grab the command to install all of the dependencies that Metasearch requires or Laravel Scout requires to push to Metasearch.

03:58

And then we're going to go ahead and change over our Scout driver to Metasearch, obviously, so it knows what we're using, and set up the host and the key as well.

04:07

So if we grab these environment files and head over to our environment file on our project, we're going to go ahead and pop these just down the bottom here.

04:17

Now, we don't need to change anything here because when we're working locally, this is all pretty standard configuration. The host is exactly what we've just opened in our browser.

04:25

And the master key here, or the key in Metasearch, we just set to anything because we don't really have a key. We're not running this in production just yet. Okay, so now that we've done that,

04:35

we're pretty much set up and we can start to add the searchable trait to our models. So let's start with our user and just test that all of this works

04:44

and see how we can actually get this data in here. So I'm going to go ahead and use that searchable trait. We might just need to index our workspace quick. So searchable, and we've pulled it in,

04:55

and that comes from Laravel, Scout, and searchable. Great. So how do we get this data into our Metasearch instance? Well, we do this directly from the command line.

05:05

Now, it's really important to note before we run this command that within your application, when a user is created, Laravel, Scout will handle automatically indexing

05:15

this for you. And for example, when that user gets deleted, it will remove it from the index. So you do not need to run this command.

05:21

If you're starting with a fresh app with no data, it will just automatically be indexed for you. This is just if you have existing data that you want to import.

05:30

Now, in our case, we've used Tynker to use our Laravel factory to generate this data out. So we just need some way to just get it into the database.

05:40

So let's go ahead and run phpArtisan scout import, and you can see this is already auto-completed from earlier, and then we just give the fully qualified namespace to the model that we want to import.

05:51

So I'm gonna go ahead and run this, and you can see, sure enough, we got a little bit of activity over here within Metasearch, but you can see

05:58

that the batched imports have all been successful. So this has imported all records up to ID 1001. We created 1,000 records. Then we registered the user, so we've got 1,001.

06:11

So if we now head over to our Metasearch dashboard and give this a refresh, as you can see, sure enough, we now have this data indexed into our Metasearch search engine,

06:22

ready to be searched on. Now, the data that we've got here is maybe a little bit too much. You might even have more columns

06:29

in the data that you're trying to import, in which case, we do want to control what columns get actually put into here, and we'll be doing that in just a second.

06:38

Let's just go ahead and do the same for our course model, just so we can see that this is working, and yeah, this isn't working because we haven't added

06:48

our searchable trait. Let's do that again, and there we go. So if we head over to Metasearch, sure enough, our courses are in there as well,

06:58

and we can just start to search on these. So let's just start to type anything, and you can see that we get auto highlight here, and everything looks like it's working and searchable.

07:08

So the last thing that we're gonna do before we continue is just control the data that we get put into here, and this also gives you the opportunity

07:16

to structure your data in a way that you need. For example, if you have avatars for your users, you probably want the image indexed, so when you output them on the client side,

07:25

you actually see the image. So how do we do this? Well, let's go over and we'll start with the course, probably the easiest to start with,

07:33

and Laravel Scout gives you a few ways that you can customize how things are indexed, the index name, all of that stuff. Now, that's all in the documentation,

07:41

but the most important one to cover is the toSearchableArray method. What this allows you to do is return an array of the data, how you want this structured.

07:53

So let's go ahead and return an array in here, and we can pretty much just choose how this looks. Now, it's always a good idea to include some sort of unique column in here,

08:01

so we're gonna go ahead and use the ID, and let's cast that to an integer. Because we're working within the model, we can just say this ID, so we've got our ID in there.

08:10

Okay, so let's have a go at just re-importing this data and just see what happens. So I'm gonna come over to the course index just here, and you can see we've got all this data in here,

08:19

and we're gonna go ahead and just re-import this. So let's import our course again, and if we head over to our index, sure enough now we only have the ID, which is great.

08:29

So, we're gonna go and just add some more details to this, so of course we have a title here, so let's just go ahead and say this title, and to be honest, for the course,

08:38

I think that's pretty much all the data that we need. Let's do pretty much the same thing here for our user, so let's head over to our user model, and we'll just pop this method down here anyway.

08:48

We have an ID, we don't have a title for a user, we have a name, like so, and again, that's pretty much it for now. We are gonna add an avatar in here,

08:57

but we'll do that in just a second. So once again, we'll re-import our course, we will re-import app models and user, and we now should have a nicer set of data

09:08

that we can start to search on. So, of course, feel free to include any information in here that you need, first of all, to search on, and second of all, to output in your dropdown,

09:18

and speaking of that, we kind of want an avatar, so we're just gonna build out a really simple avatar and get this in here. So, we're gonna use this UI avatars API.

09:29

Let's go down here and just grab the URL for this. I'm just gonna copy this over, and over in our model, we're gonna do what we would normally do

09:37

when we want to output data like this, and just create a kind of helper method for this. So let's say avatar URL, and we're gonna go ahead and return a string in here,

09:47

and let's just single quote that with this, but the name needs to be the user's name. So I'm just gonna be really lazy and just use URL encode on the user's name.

09:57

You can do all sorts of clever things here and split up first and last name, but we'll just keep it like this for now, just to keep it really simple,

10:03

and then we just want to index this piece of data. So, of course, we can just add it to our array. So we're gonna say avatar URL, because we're working directly within this model,

10:14

we can just say avatar URL. Great. So, we're gonna go ahead and re-index that data, head over to our users, and there we go.

10:22

We now have an avatar URL, and Melisirch, at least this client, is clever enough to pick up that that is the user's avatar and it's showing it there.

10:30

So this is the result of this URL. Okay, so all of our data is now indexed in our application inside of a search engine using Laravel Scout. We pretty much know how to manage Laravel Scout now,

10:44

and really importantly, when a new user registers, this will be automatically put into this index. If a new course is created, maybe through a dashboard or something like that,

10:54

that will be put into our index as well. So we don't need to keep running that command for any new data that we have in there. Okay, so obviously the next step

11:02

is to start to implement this on the front end with Vue, make a request over to Melisirch to actually grab this data back as the user starts typing. So let's head over and see how we can do this.

Sign up to access "Dropdown Autocomplete Search Anything in Laravel" right now.

Episodes

Transcript

Episode summary

Episode discussion