Dropdown Autocomplete Search Anything in Laravel
This episode is for members only

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

Get started
Already a member? Sign in to continue
Playing
10. Adding recent search history

Episodes

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

Transcript

00:00
OK, our search is looking really good, but let's start to implement some nice-to-have features. And the first one that we're going to do is implement a recent search history.
00:09
So that's going to appear just in here above everything else, and it will give us a kind of link to a recent thing that we've searched for that we can click on and then have that populated to get back the search results
00:21
that we've already looked for. Now, there is a caveat to this in that we have to enter some results and hit Enter for this to actually work, so it's a little bit weird,
00:29
but you can tweak this depending on how you want your overall thing or search experience to work. OK, so to get this working, we need to go ahead and do an npm install on a package
00:39
from Algolia, so we can add this as a plug-in called autocomplete-plugin-recent-searches. So we'll go ahead and install that, and then I'll show you how to implement this
00:50
into what we have. OK, so let's head over to our search component, and the first thing that we're going to do is go ahead and pull this in at the top.
00:58
So let's import our create local storage. There are multiple ways that you can actually create this, but we're going to choose to do this with local storage. Recent searches plug-in, so quite a mouthful,
01:13
and that is going to be, of course, from that Algolia package that we've just pulled in, which isn't also completing, which is pretty annoying. Let's go ahead and try that.
01:23
There we go, so plug-in recent searches. OK, so how do we use plug-ins for this? There are a bunch of plug-ins that you can actually use here. The first thing that we need to do
01:31
is go ahead and new this up and give some options. So we can, again, do this down here wherever we want. So we'll go ahead and call this recent searches plug-in, and we're just going to invoke that that we've just imported.
01:46
So we create that and then get that back, and then in here we can give a bunch of options, but we're going to give the key, which is where this is stored in local storage
01:55
if you need to customize that, and then we're going to give the limit. So obviously, we don't want hundreds of recent searches in here.
02:02
So for the key, we'll just call this recent search. That's pretty standard, and then we can define out a limit in here, which is sensible, and we'll just set that to five.
02:12
OK, so now that we've got this plug-in invoked, options passed in, where do we add this? Well, pretty standard. We just go ahead and create our plug-ins array in here,
02:23
and we just pop that in there, and that's pretty much it. It's going to start working. So let's head over and just give this a refresh. I'm going to start typing something.
02:31
Now, like I said, the caveat to this is that when you hit Enter, it's going to store that now, but you've kind of got rid of the results. So depending, and you can see it,
02:40
it's just appeared at the top. Depending on how you set this up and what you set to happen when you hit Enter, which we are going to discuss, this might feel a little bit weird,
02:50
but at least it's there, and we'll tweak this as we go through the course. So you can see that we've got a recent search in there. I can click on that.
02:57
That's going to populate it with the data that we have, and of course, at the moment, it doesn't show any results, but again, we'll get to that. So something that you can optionally include,
03:06
you can also click here to populate it, or you can click this to remove that search if you want to. So that is it added in there, but let's just talk about the kind of state of this
03:18
and how everything is fitting together, because when I press Enter, we'll get to that later. That's fine, but when I click on this, I kind of don't want these results to just disappear.
03:28
It doesn't really make much sense. So to get started with making this feel a lot better, the first thing that we can do is add another option to our autocomplete when we set it up,
03:38
and that is open on focus. So let's go ahead and set that to true. I'm just going to comment it out just so we can compare the behavior.
03:46
At the moment, when I click this, nothing really happens. I can't see our recent result or our recent searches here. So when I start to type, I only see the recent results when I start to type.
03:58
Now, the difference that open on focus makes, and of course, you can enable and disable this, is when I click on this, e.g. focus into this input, I automatically get a sort of starting list of users,
04:10
courses just here, and more importantly, I get my recent results. So you don't have to do this, particularly if you are auto-focusing this.
04:19
It's a bit jarring it happening when the page opens, but that is one option. You can have that set to auto-focus, and of course, you can have it set to open when this focuses.
04:28
So I'm going to leave it like that, and we're going to go and now fix up the issue where when I click on this, it just closes it off, which is no good because I want to be able to actually see the results.
04:39
You can get around this by doing a space maybe, and then you see the results, but that's not great user experience. So how do we fix this up?
04:46
Well, we're going to come up to our recent searches plug-in, and in here, we are going to use transform source to add in an event handler when we select one of these recent searches.
04:59
So let's go ahead and add in this transform source just inside of here. Into this, we get the source, and then inside of here, we can go ahead and return an object
05:09
with the source, which we can just spread out in there. And let's just take a look at this source just so we can see what we're talking about. Let's console.log that source, and I'll show you.
05:19
So let's open up our console, and there it is. So that is the source that we have in there. And if we just, yeah, we don't really need to do anything with that, but that's what it is.
05:30
So we want to spread that out into there, but then we want to add an additional onSelect to override this default behavior. So we're going to go ahead and spread out
05:40
the source in here that we return from this object. And then here, we can say, onSelect, do something. So with this, it gives us a handy setIsOpen toggle, which is really handy.
05:54
And then when we do select the item, the recent search item, we can just setIsOpen to, you guessed it, true. So that will keep the thing open when we click on it.
06:08
So let's just try this out again, and let's give this a refresh. So we've got a recent search of Alex. When I click on this now, that stays open.
06:16
And of course, it updates our result set so we can see our recent searches. Let's just go ahead and pick another thing. So I'm going to say Provident, hit Enter.
06:27
And again, we need to fix that up. But now when we click into this, we can see that we've recently searched that. I click it, and sure enough, we get the relevant results.
06:37
So there we go, a little bit of tweaking just to improve the user experience by doing stuff like this to keep that open when we click on one of our recent searches.

Episode summary

In this episode, we add a recent search history feature to our search UI. We kick things off by introducing the goal: to give users quick access to their latest searches, making it easy to revisit things they’ve looked for previously. This history appears at the top of our search menu, and users can simply click on an entry to re-populate and re-run the search.

To implement this, we use the autocomplete-plugin-recent-searches package from Algolia. We install it, import it, and then set up a plugin instance using localStorage for persistence. We configure it with a sensible limit (like 5 recent searches), so things don’t get out of hand. Then, we register this plugin with our autocomplete component, and just like that, the recent searches start showing up!

We spend some time tinkering with the user experience. There’s a discussion about how recent searches are only saved after actually hitting Enter, and how the way autocomplete opens (e.g., automatically on focus) can affect what users see. There’s also a nice tweak: when a user clicks a recent search, we ensure the dropdown stays open and the results appear immediately, instead of closing up awkwardly.

Along the way, we review some code, add an onSelect handler to override default behaviors, and make small changes to improve the flow. By the end, recent search history feels smooth and user-friendly, and we lay out ideas for further refinement in future episodes.

Episode discussion

No comments, yet. Be the first!