در حال بارگذاری ...

Hook Up Search Form0:34

simple and works pretty well for most basic sites. We also support an Algolia driver that's built-in, really easy to integrate Algolia search, and then you can write your own driver for whatever search engine you'd like. On the marketplace there are others like MileySearch and so on. So let's just start by hooking up the search form. Now our search input is in the nav partial, let's go find that. Here we go. So let's turn this div here into a form, we're going to pass it an action. The action is going to be the URL we want the search results page to be on. So let's just call it search.

The action is going to be the URL we want the search results page to be on. So let's just call it search. I'm going to take out this block of Livewire search results because the native driver doesn't support JavaScript, and let's see what happens. So we click this, we search for Flux, we hit enter, and we go to /search. Now it didn't pass the search query and that's because the input, the search input, needs to use the name q for query. You can call this whatever you want, but the convention is the letter q for query. Now let's go back, search for Flux again, and now we can see that Flux is passed along to this page, which is a 404 because we haven't made it yet.

If you want to just use a regular Blade route and set up your own controller, you're welcome to do that too. We're going for simple, easy, and conventional. So let's create a search URL. We'll pass it the search template and not even going to worry about setting a title or passing any data. Really simple. Now we'll make a search.blade.php and I do have a static search template so you don't have to watch me type that out. All right, let's save that, come back, refresh, and now we have a static search result.

Render Query and Results3:31

don't have to watch me type that out. All right, let's save that, come back, refresh, and now we have a static search result. This is not dynamic yet, so let's hook the rest of that up. Over here we want to show search results for the search term, so we're going to get the queue parameter from the query string. If you rename that, you could just do query or searchString or whatever, but we're using queue, so get queue. Refresh, search results for flux. Now for the results. Those would go here and we're going to use the search results tag.

Now for the results. Those would go here and we're going to use the searchResults tag. We'll wrap that around the static results, get rid of the extras, we're going to add the title here, the URL, the collection name, and we'll get to this excerpt in a second. All right, now that's it. I mean we've already got results. These are three pages that have the word FluxTech in the title. What about if you want to search for fields other than title? Let's configure that. Let's go to Config, Statamic Search, come down to our indexes, and here's our default.

Configure Searchable Fields4:47

Let's configure that. Let's go to Config, Statomic Search, come down to our indexes, and here's our default search index using the local driver. This searchables key tells Statomic what to search. In this case, all collections, all taxonomies, etc. Next is fields. By default, it's just the title, but we're going to add, let's add subtitle because that's a field we've got, teaser, and article content. Next let's tell Statomic to re-index the site. You can do that one of two ways, the CLI or the control panel.

Reindex Search Data5:19

Next let's tell Statamic to re-index the site. You can do that one of two ways, the CLI or the control panel. I'll show you both. In the control panel, there's a utility section. Go to search, and if we do update all, it'll rerun the search index and include all of these fields. If you have multiple search indexes, you can update them individually, however you want to do that. Or you could run php please search update, and then it'll let you choose all or just one index at a time, and you're done.

Add Result Excerpts5:42

Or you could run php please search update, and then it'll let you choose all or just one index at a time, and you're done. Now if we come back to the site and we rerun this search, we've got more results because we've got this word flux in some of the content of the pages like this one. We said we want to hook up the search excerpt. Just a little bit of text to give the page context. Since we're searching multiple collections and the fields and blueprints are different between them, we're going to need to think of the different fields that we want to potentially render the excerpt with. So let's change this to a div, and then we'll do article content.

render the excerpt with. So let's change this to a div, and then we'll do article content. We'll truncate to 140 characters, actually. Let's group it like this, article content, or subtitle, or teaser, or content. Truncate it to 140 characters, and let's see what we get. We see a little bit of the HTML being stripped off here in the middle of the tag. Okay, so instead of truncate, let's use safe truncate, and we'll make sure it doesn't split in the beginning of a word. Next we can just add a little ellipses at the end, and now we have a pretty good search result with a little bit of excerpt.

Next we can just add a little ellipses at the end, and now we have a pretty good search result with a little bit of excerpt.

Search FormSearch ResultsStatamic Routes

دوست دارید گاهی خبرهای Laracasts را ایمیل کنیم؟