Statamic Searching Techniques

February 16, 2024 · 4 min read

Statamic is a very cool CMS that lets you build and manage websites. Adding a search feature to your Statamic site is super easy. You can set it up just how you like, and it’s also easy to integrate it with other powerful search tools like Algolia, Elasticsearch, Meilisearch, or Fuse.js.

A Guide to Searching on Statamic

Create a Route for your search page

Generate a file named search.antlers.html for the search within the root directory of the view folder. Now go to the web.php file and add the following route to access the search results.

&lt;?php

use Illuminate\Support\Facades\Route;
use App\Http\Controllers\SearchController;

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::statamic('search', 'search');

First things first, you need a place for people to type what they’re looking for. This is your search form. Just a simple box on your site where visitors can enter words.

<form action="/search">
    <input type="search" name="q" placeholder="Search">
    <button type="submit">Search</button>
</form>

Show the Search Results

After someone searches, they want to see what you found. That’s where the search:results tag comes in. It takes the search words and shows all the matching stuff on your site.

{{ search:results index="default" }}
    {{ if no_results }}
        <h2>Sorry, no results for: {{ get:q }}</h2>
    {{ else }}
        <a href="{{ url }}">
			<img src="{{ image }}" alt="{{ filename }}">  
			<h2>{{ title }}</h2>
        </a>
    {{ /if }}
{{ /search:results }}

Set Up Indexes

Indexes help your search work fast. They’re like shortcuts to find things on your site. You can make as many as you need for different stuff, like blog posts or product pages. In the example below, we want to search only the posts collection for the fields: title, categories and tags. We will need to modify the config/statamic/search.php file.

&lt;?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default search index
    |--------------------------------------------------------------------------
    |
    | This option controls the search index that gets queried when performing
    | search functions without explicitly selecting another index.
    |
    */

    'default' => env('STATAMIC_DEFAULT_SEARCH_INDEX', 'default'),

    /*
    |--------------------------------------------------------------------------
    | Search Indexes
    |--------------------------------------------------------------------------
    |
    | Here you can define all of the available search indexes.
    |
    */

    'indexes' => [

        'default' => [
            'driver' => 'local',
            'searchables' => ['collection:posts'],
            'fields' => ['title', 'categories', 'tags'],
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Driver Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | that use the corresponding driver. For instance, if you have two
    | indexes that use the "local" driver, both of them can have the
    | same base configuration. You may override for each index.
    |
    */

    'drivers' => [

        'local' => [
            'path' => storage_path('statamic/search'),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Search Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | regardless of the driver. You can override these per driver or per index.
    |
    */

    'defaults' => [
        'fields' => ['title'],
    ],

];

To keep your indexes fresh when you add new things, run this command:

php please search:update

Note: The please command is part of Statamic’s configuration. It’s an alias for php artisan statamic:

Final Search File Example

Here’s what your final search file will look like if you want to have the search form and the results on the same page.

<form action="/search">
    <input type="search" name="q" placeholder="Search">
    <button type="submit">Search</button>
</form>

{{ search:results index="default" }}
    {{ if no_results }}
        <h2>Sorry, no results for: {{ get:q }}</h2>
    {{ else }}
        <a href="{{ url }}">
            <img src="{{ image }}" alt="{{ filename }}">
            <h2>{{ title }}</h2>
        </a>
    {{ /if }}
{{ /search:results }}

Or, you could put the search form in your navigation, and when users search and hit enter, they’ll be taken to our search page to see both the form and the results.

Bonus: Fuzzy Searching in Statamic

Fuzzy searching allows for matches that are similar but not exactly the same as the search term, which can be useful for catching typos or variations in spelling. If you want more power, you can connect to other powerful search solutions like Algolia, Elasticsearch, Meilisearch, or Fuse.js. They’re all different but can make your search even better.

Learn how to integrate Algolia for your Statamic site, from creating an account and configuring search drivers to using JavaScript for lightning-fast search requests directly from the frontend. Algolia offers advanced features that can transform the way users interact with your site’s search function. You can also learn how to integrate Meilisearch with your Statamic site.

The local driver may not support all fuzzy search capabilities, but let’s give it a try. Configure Statamic Search to use some of the fuzzy searching techniques:

&lt;?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default search index
    |--------------------------------------------------------------------------
    |
    | This option controls the search index that gets queried when performing
    | search functions without explicitly selecting another index.
    |
    */

    'default' => env('STATAMIC_DEFAULT_SEARCH_INDEX', 'default'),

    /*
    |--------------------------------------------------------------------------
    | Search Indexes
    |--------------------------------------------------------------------------
    |
    | Here you can define all of the available search indexes.
    |
    */

    'indexes' => [

        'default' => [
            'driver' => 'local',
            'searchables' => ['collection:posts'],
			'fields' => ['title', 'categories', 'tags'],
			'min_characters' => 3,
			'min_word_characters' => 3, 
			'query_mode' => 'any',
			'use_stemming' => true, // e.g. "running" matches "run"
			'use_alternates' => true, // Find alternate spellings
			'sort_by_score' => true,
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Driver Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | that use the corresponding driver. For instance, if you have two
    | indexes that use the "local" driver, both of them can have the
    | same base configuration. You may override for each index.
    |
    */

    'drivers' => [

        'local' => [
            'path' => storage_path('statamic/search'),
        ],

    ],

    /*
    |--------------------------------------------------------------------------
    | Search Defaults
    |--------------------------------------------------------------------------
    |
    | Here you can specify default configuration to be applied to all indexes
    | regardless of the driver. You can override these per driver or per index.
    |
    */

    'defaults' => [
        'fields' => ['title'],
    ],

];

The built-in search driver offers a variety of options that you can customize.

Helpful Tips

Keep your indexes lean. Only include what’s necessary for the search.
Update your indexes regularly so they know about new content.
Choose the best driver for your needs. You can start with the local one and try others as you go.
Adjust your search settings to fit what your site offers.

Conclusion

Integrating a search feature into your Statamic site can greatly improve the user experience by making it easier for visitors to find what they’re looking for. By following the simple steps provided, from making routes and search forms to creating good indexes, you can customize the search feature to meet your needs. Also, using more advanced search tools like Algolia or Elasticsearch can make the search even better by providing fuzzy search options for more accurate results.