Events are probably the most important concept when it comes to building graphical applications, because it's how we interact with the user. But in the case of components, we can use events to communicate from one component to another. In fact, we can communicate with as many components throughout the entire page that we need, because, well, that's the nature of events. So I want to make a few more changes to our SearchComponent. Let's go ahead and let's get rid of the clear button, so that we have something like what we began with originally. So let's get rid of that.

we began with originally. So let's get rid of that. Let's change the width back to full. But this means that we need to provide some other way for the user to clear the results. Like for example, a close button inside of the results window. So let's implement that. Let's go to our search results view. And inside of our results window, but before we display anything, let's add a div element that is absolutely positioned. The top position is going to be zero.

that is absolutely positioned. The top position is going to be zero. The right position will be zero. But then we will add some padding to the top and to the right, so that we position this a little bit better, so that it's not at the very top right corner of it. We'll have a button. The text is simply going to be an X. So now whenever we pull up our search results, we have a nice little, okay, it's not nice, but it's something that we can click on to close the button. And let's do this.

but it's something that we can click on to close the button. And let's do this. I'm going to add the type button. That way the form isn't going to submit whenever we click on this. So now we just need to essentially clear the form whenever we click on this button. And one of the ways that we can do that is to say wired:click. And then we could say that we would have a method called clear. So let's go to our SearchResults class and let's add a public function called clear. But we can't necessarily reset the results and the show properties, because those properties are for all intents and purposes being controlled by the Search component, the parent.

But we can't necessarily reset the results and the show properties, because those properties are for all intents and purposes being controlled by the search component, the parent. So instead, we need to fire an event. The child is going to dispatch an event. We can call it searchClearResults. And we want to listen for this event inside of the search component. So let's go to the Search class. And we want to execute the clear method when the searchClearResults event fires. And we can do that using an attribute called on. The idea being that on the searchClearResults event, the clear method will execute.

And we can do that using an attribute called on. The idea being that on the searchClearResults event, the clear method will execute. So now we can go back to the browser. Let's perform our search. And whenever we click on the X, it will clear the form. But we can also simplify this because we don't necessarily need this clear method inside of our searchResults. So let's just get rid of that. And instead, we will simply dispatch the searchClearResults event. This simplifies our code, but it gives us the same functionality.

And instead, we will simply dispatch the searchClearResults event. This simplifies our code, but it gives us the same functionality. Now, Livewire's events work because the browser is involved. We clicked on a button, which dispatched an event, which was sent to the server. But the browser had to know what event to send. This means that we can interact with these events inside of the browser. For example, I want Users to be able to clear the search results by clicking anywhere on the page. And since Livewire uses Alpine, we can use Alpine to do that. Let's pull up the layout page.

And since Livewire uses Alpine, we can use Alpine to do that. Let's pull up the layout page. And for the body element, let's say x-data. That tells Alpine that we essentially want to use the body element as an Alpine component. And then we will say x-on:click. And we will use the dispatch magic method to dispatch the search clear results event. Now, it's important that I point out that this is for Alpine. We are now in JavaScript land.

Now, it's important that I point out that this is for Alpine. We are now in JavaScript land. Yes, we are inside of a view, which is technically a PHP file. But the x-data attribute and the x-on-click attribute are for Alpine. And even though this begins with a dollar sign, this is not PHP. This is JavaScript, this is part of Alpine. So if you're not familiar with Alpine, you don't necessarily have to be familiar with Livewire. But I suggest that you get familiar with it because it's a fantastic little library.

But I suggest that you get familiar with it because it's a fantastic little library. So through JavaScript, we are now going to dispatch this same event that we have set up between the searchResults component and the search component. So back in the browser, we can pull up our searchResults. Whenever I click anywhere on the page, that event fires and it clears the searchResults. And if we can fire the event from JavaScript, we can also listen for the event in JavaScript. Before the end of the body, let's add a script element.

we can also listen for the event in JavaScript. Before the end of the body, let's add a script element. document, add addEventListener for search, clearResults. And we will listen so that we can do something. We'll just write something to the console, clearedResults. So let's go back to the browser, let's pull up the developer tools. And first of all, whenever we click anywhere on the page, we can see that clearedResults are being added to the console. But whenever we pull up some actual searchResults, let's clear the console and let's click on the X.

But whenever we pull up some actual search results, let's clear the console and let's click on the X. Now we see cleared results only once here. But if we look over at the right hand side, we see that it was actually fired twice. And that's because, well, we are essentially firing it twice. We fire it whenever we click on the close button, but we also fire it whenever we click anywhere on the body. And the close button is on the body, so we are firing it twice, which really isn't very efficient.

And the close button is on the body, so we are firing it twice, which really isn't very efficient. So in this case, if I were actually implementing this, I probably wouldn't have the close button at all. Because it doesn't matter where I click, the search results will be cleared, and that's really the functionality that I want. So events in Livewire are very robust. Not only can you use them to communicate between different components, you can also interact with those events inside of the browser. It's awesome.

you can also interact with those events inside of the browser. It's awesome.