3.4 Add a Search Bar and Results Template
Another common feature among blogging platforms is a post search function. Learn how to add a search bar to your site in this lesson.
1.Introduction1 lesson, 01:13
2.Building Blocks7 lessons, 56:55
3.Taking Templates Further6 lessons, 36:35
4.Conclusion1 lesson, 02:43
3.4 Add a Search Bar and Results Template
Hi, and welcome back to build blog with Craft CMS. In this lesson, we're gonna start filling out the top bar of our site, and we're gonna begin by adding a search bar over on the right hand side. And the way we're gonna approach that is by creating another partial template file, and then we're gonna load that partial into our layout template file. So let's jump down into our partials folder, then we'll create a new partial, and we're gonna call it _searchbar. And then we'll open that up for editing. And we'll set its syntax highlighting. And now, basically what we're gonna do is add a relatively simple form. For styling, we're gonna stop by wrapping it in a div with the class search_bar. Now we're gonna create a form with the class search_form. And for the action for this form, we're actually gonna specify a URL, and that URL is gonna be the location and name of the template that we're gonna use to display our search results. Curly brackets, and then inside we're gonna put URL. And then in this, we're gonna specify that we want our search results template to be in a folder named search with a template named results. Now let's just add our input fields. So we're gonna need one where the user can input their search query. So create an input field. We'll set it to type search. We're gonna give it the name query. And we'll add placeholder text reading Search. Now all we need is a submit button. So we change that to type submit. And we're gonna give it the value Go. That's all we need our search part to contain, so we're ready to include that into our layout template. Earlier on we added this HTML to get our top bar into our layout. Now inside this top bar, we're going to include, our partial file, for our search bar template. Now let's have a look at what we've got on the front end. All right. Beautiful. So now we've got our search field. At the moment though, if you try to run a search that you're not gonna get anything. You'll just get a 404 error. So next, we need to create that results page template. So back into our templates folder. We'll create the search folder that we specified we'd be using. And we'll create a new template, and we're gonna call it results. We'll set our syntax formatting. And what we wanna do is give a list of articles. We show their teasers and we wanna have a label across the top letting people know that this is a page of search results. So that means this template is very similar to the one that we created for our category pages. So let's grab our blog index page. And we're gonna speed the process along, by just copying and pasting in this HTML, and then modifying it to suit our search results. The first thing that we're gonna need to do is find out what the actual search query was that the user performed. To do that we're going to set a new variable and we're gonna name it query. And to find out what the user searched for, we're gonna use craft.request.getParam. And then what we're gonna use here, is the name that we gave the input field that the query was entered into. We name that input field query. So we'll just copy that, and we'll paste that inside this getParam function. So now this variable is gonna hold whatever string was entered into this field. So then the next step is to reach into the database and grab any entries that are relevant to this search. Now in our category page, we're grabbing our entries inside the paginate tag, but we're gonna do things a little differently in this template. Instead, we wanna store everything in a new variable named entries. That way before we output any content, we can check that entries variable and make sure that it has length, and then if it doesn't, we can instead say that there were no results returned for this search. So we're gonna set a new variable named entries. Let's just paste in what we were using inside our paginate tag, and then let's just modify what we've got here. We're not looking for anything related to a specific category. So we're gonna change this to looking at entries from the section blog. And we don't just want any entries from this section blog, we want ones that come up under search for the user's query. So we're gonna copy this and paste it inside the function search. The next thing we need to specify is the order that we wanna show whatever comes back from this search. So we're gonna add in the function order. And we're going to say that we want them to be sorted according to a score of how relevant they are to the user's query. To do that we're just gonna enter score. Now we're gonna take all that, and plug it back into our paginate tag. Now this is going to output only the entries that are relevant to the user's search string, but we only wanna use this HTML if there are some search results returned. So, we're gonna wrap this in an if check. I'm gonna say if entries has length. We're gonna add in else. Now if there aren't any search results, we're gonna output a heading, and we're gonna say No Search Results for. And in there, we're just gonna output the query that the user entered into the search field. And then we'll just add a paragraph saying, Sorry, nothing found. And then we'll close off our if check with endif. Now we're almost done. The only thing we need to modify is our heading along the top here. Obviously we don't wanna say this is the entries posted under a category, what we want instead is to say here are the search results for the query. So add in Search Results for query. Now, let's give that a quick test. We'll just search for the word craft. All right. And there are our search results. So search results for craft, we've just installed craft and there's our teaser. Now that works just fine, but we could also add in a little bit more information. What would be really helpful is if we also showed the number of search results that we found here because perhaps there are 25 search results and a visitor want to know how many things they might have to page through in order to look at all the search results. Then if we're gonna have a number here, we also wanna be able to modify it whether we're using a plural, whether we're saying search results or search result singular. To allow us to do that, we're actually going to install a plugin. You'll find a link to this plugin in the notes below this video. The plugin is called CraftPlural. So what you wanna do is hit this button here and then download the zip. Once you've done that, you wanna extract the zip and then you'll find inside a folder named plural. And you wanna copy that, and then go into the folder craft, plugins, and then paste in that plural folder. Now we can jump into our craft admin panel, go to Settings, Plugins. Here you can see that that plural plugin has been automatically detected, and now we just press the Install button. We've got the green enabled light, so that means that that plugin is now ready for us to make use of. So let's go back to our template. Now, instead of just saying search results, no matter what, we'll get rid of that. Now we can just say entries, length, plural. First we'll add the string that we wanna use if we have a singular result, which is just search results. Then, we add the string that we wanna use if we have multiple results. What the craft plural plugin is gonna do is count the length of the entries variable here, and it's gonna output that number. Then based on what that number is, it's gonna determine whether it uses this first string or this second string. Now there is one small problem though. Up here, when we set our entries variable, we limited the number of posts that it can display to our postsPerPage setting number, and that is to enable us to paginate our results down here. But we don't wanna check on just the number of entries before the pagination kicks in, we wanna check on the total number of entries. So instead of using this variable, we're gonna need to put in a fresh query. So we're gonna grab the first part of this. We're gonna leave off the order, cuz that's not relevant to just the number of results. And we're gonna leave off the limit. So we're just gonna copy this, and paste it in here. So now let's see what effect that has on our heading. So we'll refresh that. All right, so there we go. Now we've got one search results showing up for craft to represent our singular search result. Now earlier I set this to show just one post per page so that we could test the pagination on our search results. Let's try something generic that we know is gonna come up with multiple search results. We'll just use the word the. All right, and now we've got three search results for the word the, but only one shows up before our pagination kicks in. As you can see here, though, we have a little problem, and that is our search query is no longer showing up in between our talking. That's because, if you look at the URL, we no longer have the query in the URL string any longer. If we go back to our previous page, we have query equals the and that's where this text here is being pulled from. So we're just gonna need to modify our pagination links. So rather than using our partial Just grab this. We're gonna copy all of this HTML. And we're gonna paste it in instead of using this partial. And we need to make sure that the URLs we linked through to have this on the end. So we're just gonna copy that, and we're gonna paste it on the end of our next and previous links here. But obviously we don't wanna have the word the in there permanently. What we want, is the actual query from the search field. So we're just gonna add query. And that will pull in our variable query that we set up earlier here. So now, let's see what we get this time. So scroll down, hit our Next Page link. We still have our query in the string, so that means that our heading still comes out correctly. All right, so now our search bar is added into our top bar, and our search results page is all working perfectly. Now to finish off our top bar. We're gonna add a navigation area here, and we're gonna go through do that in the next lesson. I'll see there.