Okay, let's add some nice UX additions for our search drop-down using Alpine.js. So, a quick note on when I would prefer to use Alpine.js over something like Vue. If you're within the context of a server-driven app, and all you need to do is toggle some components, maybe focus some components, then I would prefer Alpine.js because it's very minimal, feels very light, and it requires no build steps. However, if we were building a highly interactive site, I would probably go with something like Vue. And in this case, we're just toggling the visibility of this component. So, let's go ahead and use Alpine.js. So, let's install it. Installing it is just using a CDN, and that's the only step. So, let's grab this, and let's go to our app.blade.php. So, it's the first tab here, and let's put it up here. So, put it right here. Okay. Okay, back to our search drop-down. So, the first case I want

and let's go to our app, Blade. So, it's the first tab here, and let's put it up here. So, put it right here. Okay. Okay, back to our search drop-down. So, the first case I want to handle is clicking off of this, and then having this disappear. So, let's do that. So, the first step when you use Alpine is to define some state. So, I'm going to put the state within this entire div. So, the scope of that state is the same as the scope of this div. So, let's do xData. So, that's like data in Vue. And let's make a piece of state here called isVisible. So, let's make it an object, and say isVisible true by default. And the next thing we want to do is control the visibility of the thing we're trying to toggle. So, in this case, it's the drop-down. So, it's this div here. And for that, we can use the xShow directive. So, this is like vShow in Vue, and it just adds display none if you want it to be hidden. And we just wanted to show or

So, it's this div here. And for that, we can use the x-show directive. So, this is like v-show in Vue, and it just adds display none if you want it to be hidden. And we just wanted to show or hide based on that piece of state. So, isVisible. And the last step is to add an event that toggles this piece of state. So, in our case, we want to click off of this. So, there is a handy modifier in Alpine called .away right there. And what this does is it will only be executed if the event originates from the source other than itself. So, that's exactly what we want. So, we can do addClick.away. So, anytime the search drop-down is clicked away, then we want to toggle that piece of state. We can do isVisible, isFalse. And this should work. So, let's start from scratch. And we actually have two things now controlling our visibility of the search drop-down. We have Livewire for the initial render. And now, if I click off of it, we have Alpine hiding it. Cool.

actually have two things now controlling our visibility of the search drop-down. We have Livewire for the initial render. And now, if I click off of it, we have Alpine hiding it. Cool. And it works. So, the next case I want to take care of is if I refocus it, I want it to show. Let's do that. And I'm going to do that on the input. And we just want to listen for a focus event. And let's say isVisible is true. And that should work. Let's try again. Zelda. Click off. Refocus. And it shows. Cool. The next case I want to take care of is pressing Escape and hiding the drop-down. So, let's do that. And I want this to happen on the entire window. So, wherever I press Escape, I want to hide that. So, there's also a modifier for listening on the entire window. It's KeyDown. We can do modifier keys here. So, certain keys like Escape work. And for the entire window, just tack on .window. And again, we can set isVisible to false. And now, the Escape key should

and I tab off of it, then I want it to hide as well. So, let's take care of those two cases. So, let's start with the first one. So, Shift-Tab on the input. So, again, let's go back here. We can do another KeyDown. And we can do modifier keys. So, Shift and Tab. And we can just do whatever we want. So, isVisible is false. So, that should handle that case. So, let's refresh. Zelda shows Shift-Tab, and it hides. Cool. And for the other case, so I want to tab off of this, we have to make sure we're on the last iteration of the loop. So, we can do that within Blade. So, let's go down to our loop here. And here is the anchor tag. And let me just reformat this. And we want to add KeyDown.Tab. And then we want to hide it here. So, isVisible is false. But we only want to do this on the last item of the search dropdown. So, we can use if. We can do loop.last. And that will only execute if we're on the last iteration of the loop. So, let me just

But we only want to do this on the last item of the search dropdown. So, we can use if. We can do loop.last. And that will only execute if we're on the last iteration of the loop. So, let me just put this together. And let me grab this and put it in here. Okay. So, let's see if this works. Let's type something in. Shift-Tab works. Tabbing back on it re-shows it. And if I tab off of this, it should hide. Cool. Now, I'm not going to do keyboard navigation because that involves more steps. You're going to have to keep track of the current index and update it whether you're pressing up or down or pressing Tab or Shift-Tab. But if you're interested in that, I actually have a video. But it's on Vue.js on my YouTube channel. So, another cool feature I want to add is pressing the slash key to focus this search input. So, you see this on sites like Laravel, Tailwind CSS documentation, or even on Laracasts. So, let's implement that.

the slash key to focus this search input. So, you see this on sites like Laravel, Tailwind CSS documentation, or even on Laracasts. So, let's implement that. So, let's go to our input. Let's change our placeholder to say search. And let's say press slash to focus. Okay. So, to do this, we have to make use of refs and get the actual DOM element. So, if you're familiar with refs in Vue.js, it's pretty much the same thing. So, we need a reference to this DOM element. So, in this case, the input element because we have to focus it. So, to define a ref, we use x-ref and give it a name. I'll call it search. And now we want to listen for the slash key on the entire window. So, sort of the same as listening for the escape key, but now we're listening for the slash key. And we can put this anywhere because we're listening on the entire window. So, I'll just put