By default, Drupal offers the ability to search the site with its core Search module. However, this module can be limiting. In this tutorial we are going to configure live results. Below is the final result. When a user begins to type, live results will appear that are linked to a node.
Enable the Modules
Navigate to the modules page and enable the following modules.
- Database search
- Search API
- Search API autocomplete
- Search live results
- Search pages
- Disable the core Search module
Add A Server To Search
- Navigate to the Search API configuration page admin/config/search/search_api
- Click Add server, or go to admin/config/search/search_api/add_server
- Give the server a name, and make sure to check Enabled
- Select Database service for the server class. The default settings can be used for everything else.
Edit the Default node index at admin/config/search/search_api/index/default_node_index/edit
Under Server select the server you just created in step 2 and click save.
- Navigate to admin/config/search/search_api/index/default_node_index and click enable in the status row.
- Once enabled, click Index now to index all content on your site.
- Under the Fields tab or admin/config/search/search_api/index/default_node_index/fields, select the fields and other data you wish your site to be able to search. In my case, I only have the default Basic Page and Article content types enabled on my site. Because of this, I made sure to have the tags field searchable, along with the summary of each content type which is stored in the body field.
Add A Search Page
- Navigate to the Search API Search Pages page at admin/config/search/search_api/page
- Click Add search page or go to admin/config/search/search_api/page/add
- Set the Index to the Default node index we enabled in the previous section
- Set the path for the search page. In my case I kept it simple and used search.
Configure Live Search Settings
- Navigate back to the Default node index page at admin/config/search/search_api/index/default_node_index
- Click the Autocomplete tab at admin/config/search/search_api/index/default_node_index/autocomplete
- Enable Global Site Search that we created in step 4 and click Save
- Click the Live Results tab at admin/config/search/search_api/index/default_node_index/live-results
- Enable Global Site Search that we created in step 9 and click Save
- (Optional) Click edit to adjust how many live results will appear when running a search. You can also select Use view mode: 'Live result search' to display results. Instead of simply displaying the title of the node on the search box, this will display the content based on your configuration of the Live result search display format. For now, I'll just use Only show title (linked to node).
Configure Search API Permissions
- Navigate to admin/people/permissions and grant the appropriate roles these permissions.
- Use autocomplete for the Global Site Search search
- Use live result search
- Access Global Site Search search page
Enable the Search Block
Users can now search the site at /search, but let's make it even easier for them by adding a search block to the header.
- Navigate to the blocks page at admin/structure/block
- A search block with the name we used in step 3 of Add A Search Page will be available.
- Add this block to the header, or any other region
Optional: Show Node Content In Live Search
The above steps allow users to search as they type by displaying node titles. However, we can also display node content while users search too. This is perfect for e-commerce sites, but can be used almost anywhere. Below is the effect we are after. Note that you will need to use custom CSS to style this.
- Navigate to the Manage display tab for any content type being indexed. Then, go to the Live results search display. For an Article, that would be admin/structure/types/manage/article/display/live_results_search.
- Configure the fields you wish to display and save.
- Navigate to the Live Results Tab for the Default node index we configured earlier, or go to admin/config/search/search_api/index/default_node_index/live-results
- Click edit next to Global Site Search
- Under Display Method enable Use view mode: 'Live result search' to display results and save.
- You will need to style these search results using CSS. Each theme is different, so I will leave this step out. You could also use Panelizer to help with this.