Laravel Mentions
This episode is for members only

Sign up to access "Laravel Mentions" right now.

Get started
Already a member? Sign in to continue
Playing
13. Username lookup search

Episodes

0%
Your progress
  • Total: 1h 52m
  • Played: 0m
  • Remaining: 1h 52m
Join or sign in to track your progress

Transcript

00:00
Over time as our user list grows, we're not going to want to just dump all of the users and usernames within our template for the app to look up inside of here. Now there's a couple of reasons that this doesn't work very well. The first reason is that we just get presented with a huge list and there's no real way to filter this as we start to type. The second reason of course is that it's going to start to get very slow and it also kind of exposes all of your users at once.
00:29
So it's a little less private than having this tucked behind a search, where when for example we say at A, then we want to send a query across to some other endpoint to only search for this query. And then we can perhaps limit the results on the back end somehow. So the question is, how do we do this?
00:48
Well, let's first of all just populate our database with a bunch of users. So let's come over and run phpr to certain tinker here. Let's grab our user. Let's use factory and let's really bump this up. So we'll bump this up to 5000 here and we'll go ahead and say create.
01:06
Now we know that over in our user factory, we've added our username. But what I'm also going to do is add in unique just so we don't get any collisions here. So let's go ahead and run this and we should be good. And let's go back over to here, type something in and yeah, there we go.
01:24
So we've got this huge list of users which we can start to filter down, but we don't really want this initial huge list. It kind of gets in the way and this is probably affecting the speed of our page load as well. And like I said, if we view the page source here and just take a look,
01:41
we're probably, let's just find out where this might be. And we've got all of these users in here now, this huge long list that now someone can look through. So really not ideal. OK, so let's figure out on the client side how to do this first of all.
01:58
So let's start over in our comment index. We will be building a plugin for this. We're going to duplicate the functionality initially, but we'll go ahead and build a plugin for this a little bit later.
02:10
So what are we doing at the moment? Well, we've got this mentionables class, which is fine for, you know, a couple of thousand users. Ideally, what we want to do is turn this into a callback where we can perform a search and return or set the results. So we still keep values. Nothing here changes.
02:29
But what we do is we instead we create this into a closure where we receive in text, which is essentially the query that we are typing as we press the trigger key and then start to type. And we have CB, which is callback. So we use this to invoke the callback to pass through the data and then that will get set into the values like we've already done.
02:52
So we want to basically pass this off. We don't need to do this, but we're going to pass this off to a function called user search. And into that, we're going to pass in the text. We're going to grab the users that we get back here.
03:06
I'm going to do a callback with them users to basically set them. So really, all that we need to do now is create our user search. Function in here that's going to take in the text and the callback, and we basically want to invoke the callback and pass through the array of objects into that.
03:27
They will then get set into values since we invoke callback here. So let's just try this out in a very, very basic way. So let's just say CB. And I'm just going to manually do this just so we know that we've got this working.
03:44
And let's say key Alex. And these need to be double quotes. And let's say value Alex. So there should just be one username here. Now, when we start to type. So let's say hey at. And there we go. We get the data in there exactly as we expected.
04:02
So the question is, what do we do now? Well, it really depends. We could use a standard fetch within JavaScript if we wanted to. We could use Axios since it's already loaded into Laravel. You can do pretty much whatever you want here.
04:15
We basically need to hit an endpoint, pass through the text that we're trying to search for and return a list of results. So let's start to build that out first. We can test that manually in the browser. So to do this, let's create out a controller. And this controller we'll call user search controller. We'll keep this really basic.
04:34
And you can go ahead and change this around if you want. So this user search controller's sole job is to just return a list of users based on a query that we pass in. So we're going to bring in our request object in here. We won't write a test for this, but we could later if we wanted to. So for now, let's just return user get. I'm just going to sort of take this step by step.
04:55
So user get. I'm going to register this under our web routes. We don't need to do this. We could register this under our API routes, but I'm just going to keep things really, really simple here. And I'm going to create our route here. It's going to again be a get route. And we're going to say user slash search. We're going to hook that up to our user search controller.
05:13
And that's pretty much it. So now we can just pass through a query here. Let's go ahead and duplicate this and we'll say user slash and search. And let's say query and we'll say AL just to see what comes back. OK, we get a 404. That's just because of the order that we have things in here, because remember, we've got a profile page here as well.
05:33
And it's making it basically look like we're trying to look for a profile called search. So there's a couple of ways that you could do this. You could either do a completely different URL. So users underscore search, or you could put this above here. Then you come into the issue where you can't have a user with the username search.
05:52
So I'm going to leave it like this. But just bear in mind, you might want to change the URL around. Let's head back over and give that a refresh. And there we go. OK, so, yeah, we need to pull in our user namespace. That's fine. Let's go over and do this now. Let's pull in our user model. Give that a refresh and we just get all of our users dumped out here as expected.
06:12
Now, we kind of want a better structure to this. So let's say user query just to pull this down to the next line. Let's grab these and then let's map through them, kind of like we did when we created our mentionables class a little bit earlier. So let's map through each of these users and let's return the kind of structure we're looking for. Because at the moment, it's just pretty much everything dumped out in here, which is not what we want.
06:36
So we're going to say key. That will be the user's name and value. That will be the user's username. Let's just make sure we've got this right. So over here, what do we do under the comments index? We set the key to the user's name and the value to the username. Yeah, so that's all good. OK, so if we now hop back over to the browser, give that a refresh, we now get a better structure to this with just the key and the value.
07:04
But of course, this is still not actually performing a search. Now, we're going to switch this over in the next episode to use Laravel Scout. If you are not using Laravel Scout or you don't want to use Laravel Scout, that is absolutely fine. You don't need to do this for something as simple as this. You could just say where username and you could say likes. You could just do a really quick search in your database for this and you could use percentage signs here to separate this out between,
07:34
let's say, the request and get queue. Otherwise, you would just have an empty string in there. So that will be enough to give you back just the results you need that match what you've typed in. It would probably be better to say that you wanted to search for the start of the query here, plus anything after it. That's going to give you more accurate results. So if we just give that a refresh, that's just going to give us any usernames that begin with a L.
08:05
So you can see here that the list is a lot more refined. And as we update this, it gives us some better results back. So that will do for now. But of course, later, we'll switch this over to Laravel Scout in case you wanted to. So let's hook this in to what we've built over in our search or our comment index. So what do we do here? We've already got Axios loaded into Laravel, so we don't need to do any setup here.
08:31
And we're going to say Axios get and we're going to go through to slash users slash search. And we're going to add on to the query string, the text that we get through into this callback. And then once that finishes, we get a response in here which will contain all of that data. And with that response, we then want to invoke this callback. So that callback goes directly into here.
08:54
And we've not given this any particular structure. So really, all we want to do is just say response dot data, which will just contain all of the data that we see here. And to be honest, that should be everything that we need to do. Let's head over and see this in action. So let's go over and say, hey, act. Now that will start to give us an initial list of users. Now we can change that around.
09:16
When we get to switching this over to Laravel Scout, it's going to be a little bit easier. But as I start to type now, you can see, sure enough, this starts to go ahead and filter this down. If we take a look at the network tab here, you can see each of these things as we type them. So let's say A-L-E-X. And yet, sure enough, we get this back in here.
09:37
Now, at the moment, what's happening, if we just take a look at this, you can see that we do get a bunch of results here. That's probably why I open the network tab. But we only see one result in here. Now, the reason that this happens is because when we do now specify the search, we want to specify the lookup and the fill attribute. So the lookup thing that we're going to use to look this up and display in the list is going to be the value.
10:01
That's going to be the key inside of the response that we get back. And similarly, we have a fill attribute as well, which is used to fill that value in. So now we should, if we search with a at Alex, we now get a much better list of everything that starts with Alex. Of course, we can just start to filter that down as we need. And it's a lot more convenient now.
10:27
OK, so we now have a relatively simple solution for going ahead and searching for usernames. If we want to bump this up and step this up a little bit, we probably want to use something like Laravel Scout with a third party search engine software. At the moment, what we're doing is OK, but it's not ideal long term. So let's go to the next episode, switch everything over to Laravel Scout, and then we'll go ahead and build this into a plugin so we can reuse everything that we've done a lot more conveniently.

Episode summary

In this episode, we tackle the problem of searching for users to mention (like using the @ symbol) in a scalable way. Originally, our app just loads and dumps every user in one giant list, which is just not practical or private as the userbase grows. We talk through the performance and privacy downsides of this approach and get ready to upgrade it.

We start by seeding the database with a ton of users—like 5,000—to simulate a real-world, busy app. Then, we look at how to refactor the frontend so that, instead of always having every user loaded, we make a search request as the user types. This involves tweaking our mentionables component to call a local userSearch function on every keystroke, which will in turn query an API endpoint we set up.

On the backend, we build a really simple controller and endpoint (just using regular Laravel Eloquent queries) that takes in the query and responds with a filtered list of users. We make sure the data structure coming back works with our frontend dropdown.

Then, we connect the frontend search box to the backend endpoint using Axios, so that as you start typing (for example, @alex), the component reacts and updates the suggestions live—without ever exposing every username at once. We also tweak some attributes so the display and selection works smoothly.

This gets us a basic, much more scalable username search! Next up, we’ll look at making it even better with Laravel Scout for more advanced searching, and then wrapping this up in a reusable plugin.

Episode discussion

No comments, yet. Be the first!