Adding a search component with URL query parameters: Learn Livewire

00:07

that we've got. So we'll run through this whole thing together. Majority of this we've covered already, but you'll see how all of this just gets pieced together.

00:15

OK, the first thing I'm going to do is just increase the pagination amount to 10, just so we have a few more results on the page here. And we'll go ahead and add this component.

00:24

Now, I'm not going to create a separate component for this within Livewire, because in our book index, this search kind of relates to the index. So I'm just going to go ahead and put this

00:33

at the top somewhere. So let's wrap our entire thing here in a div, so we can create out that new component. Remember, we always need a root level element

00:42

to our component. And we're pretty much just going to grab the same markup from any of our other items and put this in here. And then, of course, that is going

00:55

to be our search component. And we can go ahead and add a space y of 4 in there. It's getting a little bit messy, but it's fine. So there's our search.

01:04

So let's go ahead and add in an input here. And we can use a type of search for that. We'll get rid of the name. We can add in an ID of search or query, whatever we want to say.

01:16

And again, bring in a label here for search. Write search, and we're just going to get rid of that with CSS. OK, so let's add some styles to this.

01:26

We can pretty much steal them from any of our other forms. So let's go over to our create book form. And let's just grab these styles from here just to save a bit of time.

01:41

And there we go. So that's our search component. And we'll get rid of the space y of 4 on there. So let's add a placeholder really quickly.

01:50

Search your books, and we're done. Now, as part of this episode, we're also going to look at the query string because Livewire allows you to update your query string

02:01

with any data that you need to keep state. And that's a really good candidate for searching. So if I type book in here to search, I kind of want this added to the query string

02:11

so the next time I land on this page, I can see that search pre-populated. So let's go over and just start to hook this up. So over in our book index, we need a property

02:23

to keep track of what we're typing. That's the first step to get this working. So we're going to go ahead and add in a string here called, let's actually call this query because I think that makes

02:33

a little bit more sense. So let's rename this to query and set that to query. Okay, so we can hook this up now via a wire model. So we can say wire model and query.

02:49

And we know that we want this to be live because as we type, we want the results to be updated. We don't necessarily want to click on a button for this to happen.

02:57

So we're going to add live in there and let's just dump out the query in here so we know that everything is hooked up properly. So ABC and sure enough, it's working.

03:07

Now we can add a debounce to this. We're going to do that so we don't send too many network requests. So I'm going to add a 500 or let's just bum that down

03:15

for search to 300 millisecond debounce. And as you can see, when I search for something, it then shows the list of results after that 300 milliseconds of keyboard inactivity.

03:27

Okay, now that we've hooked this up to our query, our model, how are we going to do this? Well, what we can do is we can take this query and within the render method,

03:37

just use this to search based on that query. And we're not going to be doing anything too advanced here. We're not going to be indexing results. We're just going to do a standard MySQL like in here

03:47

to get these results through. But once you're done with this and you want to index anything, you can go ahead and change this over.

03:54

So we're going to modify this to grab our book. So let's just pull everything down to a new line just to keep this nice and tidy. We're still paginating here

04:05

and we want to add in a conditional thing to this query when we have filled in that search. So to do this, if you've never seen when before within a builder, we have a Boolean value

04:20

and then we have a callback which we can access our query. So basically when we have some sort of data in our query that we're searching for, then run this callback to further filter down with Eloquent.

04:33

So we can use the filled helper within Laravel for this and we can just say this query. So basically when this query has stuff entered into it, continue to perform some sort of query on the database.

04:46

So for us, that query is going to be where the title is like and then we use percentage signs to use a fuzzy search from either the left or the right hand side. And then in here, we can just concatenate in this query.

05:08

So you may have seen this before if you've worked with SQL, it's not the fastest solution, it's not a solution I'd recommend, but it's just an example here to show you that this works.

05:17

So we can also use an or where, because we might wanna search on the author as well and we can do exactly the same thing. So if the author fuzzy matches the query

05:27

that we've typed in, then we want that as part of the result set as well. So we can pass that in. Okay, great.

05:33

So if we do have stuff in the query, continue to do this, otherwise we'll just get the latest set of results. So if I give the page a refresh here, query obviously hasn't been filled yet,

05:43

so we're just getting our standard results in. I've added a couple of other results here just so we have some better keywords to search on. So let's start typing.

05:51

So I'm gonna type Livewire and sure enough, we only get two results. We didn't really see that change too much. If I say scroll, for example, we only get that one.

06:02

I'm gonna get rid of that. That's gonna refresh the list. We can search for Fred and that will give us only things by Fred.

06:10

The possibilities are endless. So nicely, we now have a working search, but we wanna get this into the query string because when I refresh the page, the state is lost.

06:21

So how do we do this? Well, it's very, very easy with Livewire. Again, we're gonna use an attribute above this query to go ahead and say that we want this

06:31

to be included in the query string. So let's go and pull in a new attribute and this is the URL attribute. There's a couple of options that we can pass through to here

06:41

and I'll show you how to do that in a second, but let's just check this out. Okay, so we need to be really careful here because remember, we're also using pagination.

06:48

So we wanna make sure that we don't lose the pages that we're on. So I'm gonna go ahead and search for Mabel and sure enough, you can see that

06:56

that has now been put in the query string. If we scroll down here, we've got a list of books by Mabel. We'll shorten our pagination in a minute to make sure it doesn't interfere.

07:05

Now, the interesting thing about this is when I hit Enter, you can see that it already populates this search field with that data. We've not had to add in any complex hooks

07:15

or anything to re-render anything or add this specifically to here. All of LiveWire's functionality is hidden behind this attribute,

07:24

which means that it will automatically populate this for us. So all of that kind of stuff's in there, you can have a look at it. Okay, so a couple of things that we can do with this

07:32

is name this. So we can choose a completely different name for this if we don't want it to be called query in the query string.

07:39

So we can just provide the as option in here and we can say as search, for example, or we could shorten that down to queue. And as you can see, if we just get rid of that

07:51

manually in the query string, if I type Mabel, you can see that's now named queue, but it will be correctly mapped up to our property called query.

08:02

So a couple of other things that we can do in here is we can set history to true. So let's go ahead and set history to true here and we'll see what this looks like.

08:10

Now it's probably not recommended to do this unless you have a very specific reason, but if I were to say search for Alex and then go ahead and search for Mabel,

08:19

what I can now do is hit the back button and that's gonna go back to the previous query string that I typed in there. You might need that functionality most of the time you don't

08:27

but you know it's there if you need it. So there's a couple of other things that we can do there, but most of the time we'll just be using this with as and then naming it if you need to.

08:37

Now we wanna make sure that this interacts properly with pagination. So I'm gonna bump this down to three. Let's actually bump it down to two

08:44

and I'm gonna search for Mabel in here and you can see, sure enough, we do have our pagination links. So we're on page one, normally within Laravel,

08:53

what we'd have to do is bind this in when we rendered out our links. But as you can see, when I click this, Livewire is keeping in the query automatically here

09:01

because we've defined it with that attribute in our main class. So you can see that we don't really need to do anything special here.

09:08

It's just keeping it in there as we paginate through, which is really helpful. So we can go ahead and change this query over. We could be on page three

09:16

and continue to search if we wanted to and that's gonna keep us on page three. And there's a ton of other programmatic things that you can do with Livewire pagination

09:26

if you need to directly within your components. But that is basically our search added, very basic search, but added to the query string and it works nicely.

09:37

And if you have a faster solution where you're indexing records in a third-party search engine, you can just swap this over to call that instead.

Sign up to access "Learn Livewire" right now.

Episodes

Transcript

Episode summary

Episode discussion