One of the really cool things about Google, and really any search engine, is that we can perform a search, we can take the URL, and we can paste it inside of any other browser, and we would essentially get the same results. And I want that functionality for our application. When someone searches for something, I want that to appear in the URL, so that someone could copy that URL, paste it inside of another browser, and not only see the search term in our search box, but also get the results displayed. And we can actually do that, because Livewire gives us the ability to store a component's property in the query string. All we have to do is decorate that property with the URL attribute.

property in the query string. All we have to do is decorate that property with the URL attribute. And that's it. So I have applied the URL attribute to the searchText property in our SearchComponent. So now whenever we type into the search box, we can see in the URL that searchText property is listed with the value that we typed in the search box. And that's awesome. So maybe we can copy this. We can open up a private browsing window, paste it in, and well, it kind of worked. Because we see the search term inside of our search box, but notice that we don't see any

We can open up a private browsing window, paste it in, and well, it kind of worked. Because we see the search term inside of our search box, but notice that we don't see any results. In fact, it says no results found. But that's mostly due to how we wrote this component to begin with. Because all of the work is done inside of the updatedSearchText method. We can see that there we reset the results, we validate the search text, and then we perform our query. So if we wanted this to update, we would need to essentially do all of that inside of the render method.

So if we wanted this to update, we would need to essentially do all of that inside of the render method. So let's do that. And really, we don't have to do everything here. We just need to perform our query. So let's do this. Let's just, well, let me copy this so that I don't have to type this back out. But let's delete the updatedSearchText method. And really, we don't need to validate our searchText anymore. So we can get rid of that attribute.

And really, we don't need to validate our searchText anymore. So we can get rid of that attribute. We don't really need the results because we can provide the results as the model to our view. So that whenever we call render, what we will do then is provide the results there. And we would perform our query, but it would be based upon our searchText. But we do need some wildcards here because we are performing a like query. So here we will just include our searchText. We don't need a separate variable. And that should be okay.

We don't need a separate variable. And that should be okay. So that now, back in the browser, we can see that the results are listed here. And whenever we click anywhere else to clear those results, we get a server error because results does not exist. But that makes sense because whenever we clear the results, we also are clearing the results property which doesn't exist. So we don't need that anymore. We just need to clear the search text. So now back at the browser, whenever we clear the results, we can see that those results

We just need to clear the searchText. So now back at the browser, whenever we clear the results, we can see that those results are gone. But notice in the URL, searchText is still in the query string. And I guess that's okay because there's no harm in that being there, but I don't want that there. If we don't have a searchTerm, we don't need it in the query string. We can fix that when we use the URL attribute. There's an option called accept. The idea being that Livewire will put an entry for this property in the URL except

There's an option called accept. The idea being that Livewire will put an entry for this property in the URL except when the value is whatever we specify. So if searchText is an empty string, it will not be included in the URL. And there it is. It's not there anymore. We can provide our search and we can search for anything. We can take that URL. Let's just go ahead and close this private browsing window. Let's paste this in.

Let's just go ahead and close this private browsing window. Let's paste this in. We can see our results, but whenever we clear the results, the search text goes away from the URL. And that's awesome, except I don't necessarily like search text being here. That's rather verbose. And I guess it really doesn't matter, but again, I think it's worth doing something about just like it was worth removing search text from the query string if we didn't have any search to text, if we didn't have any text to search. And that's easy enough to fix because we can provide another option here called as.

any search to text, if we didn't have any text to search. And that's easy enough to fix because we can provide another option here called as. And since this is for a search, we could very easily just use the query string parameter of Q, the idea being that this is a query. So now notice that the URL is search_text=such. And we can see that nothing is working as far as that is concerned, but that is because now Livewire expects this query string parameter to be a Q. It has mapped Q to our search text property. So now if we use Q, set it equal to such, our search component is taking that value and it's performing that search.

So now if we use Q, set it equal to such, our search component is taking that value and it's performing that search. And it doesn't matter what value we provide the query string parameter of Q, it is going to search using that value. Now history is a very important thing when it comes to any web application. And by default, Livewire uses replaceState when a property value changes. Like for example, we're going to start at laracasts.com, but then let's go to Livewire from scratch. We will perform our search, we get our results, but if we hit the back button, it's going to take us back to Laracasts.

We will perform our search, we get our results, but if we hit the back button, it's going to take us back to Laricasts. It doesn't take us back to just the roots of our application of Livewire from scratch. And that's because Livewire is replacing state. It's not pushing state into the history. So if we want to change that, we need to use another option whenever we use the URL attribute. It's called simply history. And we can set it to true, meaning that it is going to push state as opposed to replace state. So now whenever we perform a search, we of course see the q in the query string and our

state. So now whenever we perform a search, we of course see the q in the query string and our value. But whenever we click on back, it's going to take us not to laracasts.com, it's going to take us back to the homepage of our application. And of course, if we perform a search and then some other value, whenever we click on the back button, it's going to take us to each one of those values that we entered. And that's not necessarily good in this particular case, but that could be very useful. Now there are times when you don't want to use the URL attributes. Like for example, if you need to provide those options dynamically, well, in those cases,

Now there are times when you don't want to use the URL attributes. Like for example, if you need to provide those options dynamically, well, in those cases, you would want to use the query string method. You simply return an array where the keys are the name of the properties that we want to work with. And then we simply provide the options that we want to set. So to replicate the same functionality, we'll use Q for as, let's see, history was true. And then except was an empty string. So in the browser, we should still see the same functionality. If we perform a search, then of course our URL changes, we see the results.

So in the browser, we should still see the same functionality. If we perform a search, then of course our URL changes, we see the results. If we change the query string value, then that should automatically update what we see in the browser. We should be able to navigate, although in that particular case, that wasn't a very good thing because we actually changed the URL. But by clearing the results there, we should be able to go back and see our search for such. And then whenever we clear the results, the q query string parameter is not in the URL. So whether if you use the URL attribute or you use the query string method, you can store

And then whenever we clear the results, the query string parameter is not in the URL. So whether if you use the URL attribute or you use the query string method, you can store a component's property in the URL's query string. It's a fantastic feature, and I can think of, well, a lot of places where it would be very useful.