Search Autocomplete Element¶
Adding the element is done by dragging or selecting the Search Autocomplete element into your page builder's content:
The element is registered in the Form category, so it can be placed inside a form as well as on its own anywhere on a page — a header, a hero section, a sidebar.
Input Settings¶
| Setting | Description |
|---|---|
| Search Type | Choose which of your listing types this will search. |
| Search Result Template | Choose which SRI template is used to display the results. See Creating a Search Result Item. |
| Input Name | The input name, describing what the value is for — e.g. name, address, comments. Set it to keyword if you want the typed value passed through to your inventory (SRP) page. |
| Text Type | The HTML type of the field: Text, Color, Date, Email, Number, Password, Phone Number, Time, or URL. Useful for restricting what can be entered. |
| Required Field | Force the visitor to enter a value. Only meaningful when the input sits inside a form that gets submitted. |
| Placeholder | Text displayed inside the input before the visitor types. |
| Default Value | A value pre-loaded into the input. |
| Input ID | Applied as the HTML id on the input. |
| Input Class | Added to the input's HTML classes. |
Instant results and a full search page aren't exclusive
Name the input keyword and place it inside a form pointing at your SRP. Visitors who spot what they want in the dropdown click straight through; visitors who want the whole list press enter and land on the full results page.
Results Container¶
Styles the dropdown that holds the results.
- Border
- Border Radius
- Background
Input Styling¶
Styles the search field itself.
- Input Typography — applies to both the typed text and the placeholder.
- Padding
- Input Border Radius
Results Found¶
Styles the summary line above the results, which reads Results for term (n of n).
- Results Found Text Background
- Results Found Text Typography
Behavior¶
Details that aren't configurable but affect how the element feels:
- The dropdown opens on focus if results are already loaded, and closes when the visitor clicks outside it.
- Typing shows a searching state immediately; the actual request waits for a 500 ms pause in typing.
- Up to 100 matches are returned per search.
- Clicking anywhere on a result navigates to that listing.