Search filter
A search box for the filter - typed, spoken, or matched on meaning.
In short
The Search module gives visitors a box to type into, and narrows the results as they do. Two search types are offered: Keyword, which matches the words themselves, and AI Search, which matches on meaning. You choose which fields are searched, how the search is triggered, and whether the box also takes voice input. Several settings only appear once another is switched on, and the Design tab works the same way - what you can style depends on what you've built. Three things here need Pro: AI Search, searching custom fields, and Voice Search.
Search Type
| Type | How it matches | Plan |
|---|---|---|
| Keyword | Looks for the words the visitor typed in the fields you've chosen. | ✓ FREE |
| AI Search | Matches on meaning rather than the exact words, so a search finds results that are about the same thing without using the same wording. | ★ PRO |
AI Search: matching what people mean, not what they typed
Keyword search can only find a post that literally contains the words the visitor typed - so someone who describes a thing in their own words gets nothing back, even when you are selling exactly what they want. With CAF Pro, AI Search reads the search as a description of what they are after and returns the results that fit it, whether or not the wording lines up. It is the difference between a visitor having to guess your vocabulary and being able to use their own.
Search In
This is where the search looks. Each field has its own switch, so a search can be narrow or broad.
| Setting | What it searches | Plan |
|---|---|---|
| Search All Fields | Everything available at once. | ✓ FREE |
| Title | The post or product title. | ✓ FREE |
| Content | The body of the post. | ✓ FREE |
| Custom Field | Values stored in custom fields. | ★ PRO |
Title alone is the tightest setting and usually the most useful: matches are obvious, and a visitor searching for a name finds it. Adding Content widens the net, which helps on a blog and hurts on a shop, where a word buried in a description produces results nobody expected.
Custom Field search: the data behind the page
Title and Content only cover what is written on the page itself. With CAF Pro, Custom Field extends the search to the values stored against each post - a product code or SKU, an author or venue name, a model number, or any field your theme or ACF has added. That is what lets a visitor paste in a reference and land on the right item, rather than hunting for it by name.
Text Search
| Setting | What it does |
|---|---|
| Show Icon | Puts an icon in the box. Switch it on and you choose the icon and which side it sits. |
| Search Trigger | When the search runs: On Enter / Icon Click, or On Typing. |
| Min Characters | Holds the search back until enough has been typed. Switch it on and you set the number. |
| Placeholder | The text shown in the empty box. |
Search Trigger is the one to think about. On Typing feels immediate and suits a short list, but it runs a search on every keystroke. On Enter / Icon Click waits until the visitor has finished, which is steadier on a large catalogue - and pairing On Typing with Min Characters gets you most of the immediacy without searching on a single letter.
Search type, fields, and the text search options.
Voice Search
Let visitors speak instead of type
With CAF Pro, Enable adds a microphone to the search box. You choose the icon, which side it sits, and the placeholder shown while it is listening, so the box can say what is happening rather than sitting silent.
Clear Input
A small thing that saves a lot of backspacing. Enable adds a clear icon to the box, and you choose the icon and its side. Visibility decides when it appears: On Type, so it turns up once there's something to clear, or Always.
Filter Label
The label above the module. Enable turns it on, Label Text is the wording, Show Icon adds an icon beside it, and Enable Collapse lets visitors fold the module away by clicking the label - useful when several filters share a narrow sidebar.
Note
Many of these settings are conditional: the icon picker and its position only appear once Show Icon is on, the character limit only once Min Characters is on, and so on. If a setting you're expecting isn't there, the switch above it is off. The Design tab behaves the same way - what's there to style depends on what you've switched on.
Styling
The Design tab splits into Container, for the block the module sits in, and Search Field, for the box itself. Both are built on the same flex layout controls used everywhere else in the builder, and that's what makes the module as flexible as it is.
Container: the label and the field
Container targets the Outer Wrapper and the Label. The wrapper holds both the label and the search box, so its Direction decides how they sit together: stacked with the label above, side by side on one line, or reversed so the label follows the field. Align and Gap then handle the detail - a label vertically centred against the box, with the space between them set to whatever suits.
The Label target does the same job one level down. When the label has an icon as well as text, Direction orders them and the alignment options place them - set the alignment to space between and the icon and the text go to opposite edges of the label.
Direction and alignment decide how the label and field sit together.
Search Field: the box and its icons
Search Field targets the Input, plus a group for the icons - and this is where the conditional behaviour shows. An icon group appears once two or more icons sit on the same side: put two on the left and a Left Icons target appears, two on the right and it's Right Icons. With only one icon on a side there's nothing to arrange, so no group is offered.
Where a group does appear, it's the same set of controls again: the order the icons run in, the gap between them, and how they line up against the box.
An icon group appears once two or more icons share a side.
Tip
This pattern holds across the whole builder. Anywhere a piece contains more than one thing, you get Direction, Align and Gap for arranging them - so once you've laid out one module, you already know how to lay out the rest.
Tip
Write a placeholder that says what can be searched rather than repeating the word Search. The icon already says it's a search box; the placeholder is your one chance to tell people what's in there.
FAQ
What's the difference between Keyword and AI Search?
Keyword looks for the words typed. AI Search matches on meaning, so it finds results that are about the same thing in different words. AI Search is Pro.
Why isn't my search finding text in descriptions?
Content is switched off under Search In. Turn it on.
Can visitors search custom fields?
Switch on Custom Field, which is Pro. Search All Fields is free and covers everything at once.
Can I stop it searching on every keystroke?
Yes. Set Search Trigger to On Enter / Icon Click, or leave it On Typing and switch on Min Characters.
Is voice search free?
No - Voice Search is a Pro feature.
Where's the icon position setting gone?
Show Icon is off. The position and the icon picker only appear once it's on.
Can visitors collapse the search box?
Yes, if Enable Collapse is on under Filter Label - they fold it away by clicking the label.
Can the label sit beside the search box instead of above it?
Yes. On the Design tab, set the Outer Wrapper's Direction to run across - and reverse it if you want the label after the field.
Why is there no icon group on the Design tab?
An icon group appears once two or more icons share a side. With one icon there's nothing to arrange.
How do I push the label's icon and text to opposite edges?
Set the Label target's alignment to space between.
Was this page helpful?
Thanks for your feedback!