Power Plus - List Search Module

The List Search module adds a text search input to your page. Visitors type a query, and the list results are filtered in real time to show only items that contain the search term. The search has a built-in delay (debounce) so that it doesn’t fire a request on every keystroke — it waits until the visitor pauses typing, then triggers the search.

Search is the most intuitive form of filtering because visitors don’t need to know the data structure. They just type what they’re looking for, and matching items appear.

Configuration

History & URL Options

Translations

Style Options

How Search Works

The search behavior differs significantly depending on whether the datasource processes data on the client side or the server side.

Client-Side Datasources (JSON, XML, HubDB)

For client-side datasources, all data is loaded into the browser at once. When the visitor types a search query, the framework performs a full-text search across the data locally in JavaScript:

1. The search term is converted to lowercase.

2. Every field value in every data item is converted to a string and compared.

3. If any field value contains the search term as a substring (case-insensitive), the item is included in the results.

This means by default, the search looks through every field of every object — names, descriptions, IDs, categories, URLs, everything. This is often too broad.

To narrow the search scope, use the Search Fields setting in the datasource module. This is a JSONata expression that returns an array of field values to search through:

Search Fields: [values.name, values.description]

This tells the search to only look through the name and description columns, ignoring IDs, URLs, and other fields that would produce irrelevant matches. You can include as many fields as needed: [id, values.name, values.description, values.category.label].

Because the search runs locally in the browser on data that’s already loaded, it feels instantaneous — there’s no network delay after the debounce.

Server-Side Datasources (CRM)

For CRM datasources, the search query is sent to the serverless endpoint as the query parameter in the POST body. The serverless function passes it to the HubSpot CRM Search API, which performs a full-text search on the server side. This means:

• The search only looks through fields that HubSpot’s search API indexes (typically name, description, and other text properties).

• Each new search query triggers a new network request, so there is a small loading delay.

• The debounce delay (Input Delay) is more important here to avoid excessive API calls.

Example: Product Search with URL State

A search input for a product catalog that stores the query in the URL:

Search Module:
  Name:              product_search
  List Name:         product_list
  Input Delay:       400ms
  Placeholder:       Search products...
  URL Parameter:     true
  URL Parameter Name: q

When a visitor types “running shoes”, the URL updates to ?q=running%20shoes. If they share this URL, the recipient sees the same search results.

Example: Content Library Search with Scoped Fields

For a content library where you only want to search through item titles:

Search Module:
  Name:              content_library_search
  List Name:         content_library_list
  Placeholder:       Search by title...
  URL Parameter:     true
  URL Parameter Name: clsearch

In the HubDB Datasource module, set:

Search Fields: [values.name]

This limits the search to the name column only. Without this setting, the search would also match against image URLs, category IDs, and other fields that would produce confusing results.

Example: Job Board Search

Search Module:
  Name:              job_search
  List Name:         jobs_list
  Input Delay:       300ms
  Placeholder:       Search by title or keyword...

Combined with the Greenhouse JSON datasource, this searches through all fields of each job object — title, location, department, description, and any other data returned by the API.

Combining with Filters and Sort

Search works seamlessly alongside filters and sort controls. All three types of controls target the same list by name and their effects are combined:

1. Filters narrow the dataset to items matching the selected criteria

2. Search further narrows within the filtered results to items containing the search text

3. Sort orders the remaining results

This means a visitor can first select “Electronics” in a category filter, then type “wireless” in the search, and finally sort by price — each step progressively refines the results.

Clearing the Search

Visitors can clear the search by: - Deleting the text in the search input manually - Clicking a List State Button configured with Action: Reset
- Clicking a reset link in the empty state message (using the listStateButton CSS class with state="{}")
- Pressing the browser’s back button (if history is enabled)