How to Create a Search Page in Drupal 8

/ By / 5 minutes of reading / 26 Comments

Building a search page isn’t as straight forward as you’d think. At first a client will want something which users can search content, then they may want to modify the search results or even change the ranking of certain content. Long story short, something you thought would be as simple as enabling a module, ends up taking twice as long.

If you need to create custom search pages in Drupal 7, more often than not, you use Search API or create a search page using Views. But the core Search module for Drupal 8 has become more powerful than in Drupal 7. One of the big changes, for site builders, in Drupal 8 is the ability to create custom search pages.

Fig 1.0

However, there’re a few limitations to creating a search page. First, it’ll have a prefix of “search/” in front but the full URL can be changed by creating a URL alias. Second, you can only adjust the content ranking on these pages. If you want to index extra fields or remove ones from being indexed, you’ll still need Search API to do this.

In this tutorial, you’ll learn how to create a custom search page and how to modify the search results by overriding a template.

Getting Started

Just make sure you’ve installed Drupal using the Standard installation profile. By using the Standard profile, it’ll automatically install and configure the core Search module.

If you’re using the Minimal profile, then you’ll need to install the Search module manually.

Generating Test Content

It’s useful to have real content indexed while building a search page. If you’re like me, you don’t like to spend too much time creating dummy content only to have it blown away.

So to generate test content, I’ll use the “Devel generate” sub-module which ships with Devel.

Just install the sub-module and then go to Configuration, “Generate content”. Select which content types you want generated and click on Generate.

How to Create a Search Page

1. Go to Configuration, and click on “Search pages” from within the “Search and Metadata” section.

Fig 1.1

2. Scroll down to the “Search pages” section and from here you can manage the existing pages and create new ones.

Fig 1.2

3. From the “Search page type” select Content then click on “Add new page”.

4. Enter “Site search” in the Label field and add site to Path.

Fig 1.3

Then scroll to the bottom and click on “Add search page”.

5. Once you’re back on the “Search pages” page, you can reorder how they’re displayed.

Fig 1.4

And, you can set the default page by clicking on the down arrow in the “Operations” column.

Fig 1.5

Index Content

Before we can test the search page make sure the site content has been indexed. If it hasn’t then nothing will appear in the search results.

To check the index status, go to the “Search pages” page, the one we’re previously on and look at the “Indexing progress” section.

Fig 1.6

If you see “0% of the site has been indexed.”, then make sure you index the site, by running cron. It can be ran manually by going to “admin/config/system/cron” and clicking on “Run cron”.

Once indexed you should see “100% of the site has been indexed.”.

How to Search for Content

To access the search page directly go to /search and you should see all the search pages as tabs. If you’re logged in as an administrator, you’ll see Content, Users and “Site search” (the one we created).

Fig 1.7

If you’re an anonymous user, by default you won’t see the “Advanced search” field-set and the Users tab. This can be changed by adjusting permissions in Drupal.

So to search for content enter in a keyword into “Enter your keywords” and click search icon.

Permissions

I mentioned in the last section that certain parts of the search page, i.e., “Advanced search” and the Users tab are only accessible if you have permission.

The Search module comes with three permissions: “Administer search”, “Use advanced search” and “Use search”.

Administer search

This permission let’s you access the “Search pages” configuration page.

Use advanced search

This permission allows access to the “Advanced search” field-set.

Use search

This permission is required to access the search. This permission is granted to anonymous and authenticated users when you use the Standard installation profile.

Where is the Permission for Users Tab?

You may have noticed there’s no specific permission for the Users tab. That’s because there is none. Instead, the “View user information” permission from the User module is used to access the tab. This is a bit confusing and I had to look in the code to see which permission is required to access the tab.

So if you want users to search account profiles, give them the “View user information” permission.

How to Modify Search Results

Sometimes you may want to change the markup that’s rendered in the search results. This can be achieved by overriding a specific template. Just copy over the search-result.html.twig file which can be found in the Search module or your base theme.

Summary

The functionality of the search page can very from site to site. Sometimes the out-of-the-box solution is enough other times it’s not. The core Search module should only be used if you’re happy with what it offers. If you need something custom then you’ll need to build your own page using Views (we’ll look at this in the next tutorial) or Search API.

FAQs

Q: Nothing appears when I search for something?

Make sure you’ve indexed the content by running cron.

Q: Anonymous users can’t access the advanced search section?

Assign the Anonymous role the “Use advanced search” permission and they’ll have access to the advanced search form.

Q: Can I change the URL to a search page?

Yes. Just create a URL alias for the search page you want to change.

About The Author

Ivan is the founder of WebWash and spends most of his time consulting and writing about Drupal. He's been working with Drupal for 12 years and has successfully completed several large Drupal projects in Australia.

Related Posts

26 thoughts on “How to Create a Search Page in Drupal 8”

    1. Ivan Zugec

      Hi Hiral,

      The search page has a pager. It’ll display 10 items per page.

      The pager won’t appear if the search results returns fewer than 10 items.

      Cheers,
      Ivan

      Reply
  2. Juan

    Hi,
    im trying to display images on the search results..how i i do that? i created a page with views with the URL you wrote but its not displaying any results or display Everything..how i just show images in the core results page?
    Thanks
    Juan

    Reply
    1. Ivan Zugec

      Hi Juan,

      Good question. I think I’ll write a blog post about this. 🙂

      You’ll need to write a bit of custom code in template_preprocess_search_result and get access to the node object. It’s in the results array and then you’ll get access to the image.

      Cheers,
      Ivan

      Reply
  3. Tomáš Bažnt

    Hello and thank you.
    Is there any Search API Views tutorial for Drupal 8? I cannot seem to find one and the D7 version does not match the new one (and does not seem to work).

    Thank you

    Reply
  4. Nahashon Njenga

    Hey Ivan..Nice Blog.
    I have two questions.
    1. How can I edit the size of the search bar?
    The link below is for Drupal 7 and below.
    https://www.drupal.org/node/154137
    2. How do I make the search flexible like google? I see google has the ability to like guess what you are looking for. For example, if there is an article with the title “Lessons I have Learn’t in the Apps Business”,
    and you search “What to consider before making an app”, google will bring you in article of apps business. But in this search module, I get no results, despite having an article with the lessons in the site.
    Thanks in advance.

    Reply
    1. Ivan Zugec

      Hi Nahashon,

      In regards to the first question, it should be same as Drupal 7. Look at this code example, http://cgit.drupalcode.org/custom_search/tree/custom_search.module#n48

      Also check out “Custom Search” module, https://www.drupal.org/project/custom_search

      Now about creating a flexible search like google. Google uses a lot more signals (SEO, links, traffic, etc…) and applies machine learning. Whereas on a Drupal site you just have the content. And remember they’re expects at search. 🙂

      If you’re looking for an advanced search look at Solr or Elasticsearch.

      Cheers,
      Ivan

      Reply
  5. Qu Don

    I’ve been trawling the web on how to customize a homepage search form to look like google and see what comes up my dear old Ivan of Webwash! Thanks for the tip. I’ll evaluate the custom search module, it looks good enough

    Reply
  6. Gabriel

    Hey Ivan, thank you for sharing your knowledgement.
    Can you help me to know how to remove the search formulary from the search page. Since I already have a search in my header, it is being duplicated.

    Thanks

    Reply
    1. Ivan Zugec

      Hi Gabriel,

      What do you mean by “search formulary”? The search block?

      If so, you can control the visibility by editing the block from the blocks layouts page.

      Cheers,
      Ivan

      Reply
  7. EXE

    Hi Ivan,

    I am using the core search module available in D8.2… I have two language enabled on my site ‘Fr’ and ‘En’…How can i restrict the search results to list only the results of the current language of the site..I mean if the site is on the ‘FR’ version i want the search results to list only ‘FR’ version only and vice versa…Currently when doing a search, it is displaying both the ‘Fr’ & ‘En’ versions in the result list.

    Reply
    1. Ivan Zugec

      Hello,

      I’ve never done this so I can’t give you an answer. But, could you create a view using the search filter and language filter?

      Cheers,
      Ivan

      Reply
  8. Jayanth

    Hi Ivan,
    Thanks for writing a nice article.
    Have a question, how can i have search page which only searches within releated entities in a group.?

    Reply
    1. Ivan Zugec

      Hi Jayanth,

      When you say “group” what are you referring to?

      If the content is accessible it’ll get index, which means it’ll be displayed.

      Cheers,
      Ivan

      Reply
  9. michael

    Hello Ivan,

    I am looking to create a link (in non search page) with parameters to redirect on search page (with facet parameter already clicked).
    Have you some idea ?

    I try that :
    $adapter = facetapi_adapter_load($searcher);
    $facet = facetapi_facet_load($facet_name, $searcher);
    $href = $adapter->getFacetPath($facet, array($tid), TRUE);

    outpul of $href => search/site
    I would like $href => search/site?f%5B0%5D=im_field_ref_thematique%3A6216

    Thanx

    Reply
  10. India

    Hello,
    I have search solr api installed and configured, along with search api pages. How can I add an advanced search form with AND/OR/NOT operators to search in solr index??

    Reply
    1. Ivan Zugec

      Hi Shan,

      If you need a basic search page and you don’t want to customize it then the core Search module will do the trick.

      Search API is technically “better” but it requires a lot more configuring.

      If you need to implement custom search requirements and you want to use Solr or Elasticsearch then use Search API.

      Cheers,
      Ivan

      Reply
  12. Shan

    thanks for the reply. Do you have any video tutorial in which you have explained that how to configure Search API with Search API Solr Search as a backend?

    That will be really helpful.

    Thanks

    Reply
  13. Hemangi Patel

    hello,
    i want to do customized design of default search result. how can I do that??
    please tell me if there is any tutorial or reference link.

    Also Can you please provide any tutorial link for content migration from Json file.

    Reply

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top