CMS+ Search+

Search+ adds real-time search to your Framer projects, instantly filtering content in selected Collection+ components as users type. It can search all text CMS fields or specific ones you choose, making it a flexible tool for quick and efficient content filtering.

Key Features

• Search across multiple Collection+ components.

• Search within all supported fields, or select ones.

  Currently, Plain Text and Slug CMS fields are supported.

Controls

• Searches A list, each item contains these sub-controls:

  • Collection ID Use the same ID number as the Collection+ you want to link. Set up your Collection+ first.

  • All Fields By default, search across all supported CMS fields.

  • Fields If not searching across all fields, list select CMS fields.

• Preserve Enable autofill if input text exists. Read more about preserving.

• Font Set the font styles.

• Font Color Set the color of the user input.

• Placeholder (Optional) Display custom text if input is empty.

• Placeholder Color Set the color of the placeholder text.

• onInput optional property accessible via a code override. See Developer API section below.

Step-by-Step Setup

1. Insert onto your page.

2. Add items to Searches.

   • Set the target Collection+ ID number.

   • Choose to search within All Fields, or not.

   • If not searching within all fields, add items to Fields for select ones.

     

     To remove an item from a list, simply right-click on it.

   
   

3. Configure the rest of the controls to complete.

Developer API

The onInput prop lets you pass a custom function to capture and respond to changes as a user types in the input field. It receives the same onChange event that a native HTML <input> would.

onInput?: (event: React.ChangeEvent<HTMLInputElement>) => void;

This is useful if you want to implement custom logic with the user's input. If you are new to code overrides, visit Framer's documentation https://www.framer.com/developers/overrides-introduction. Here is a basic example:

// search_plus_override_example.tsx

import { forwardRef, type ComponentType } from "react"

export const withUserInputOnChangeCapture = (Component): ComponentType => {
  return forwardRef((props, ref) => {
    // your custom function
    function handleInput(inputEvent){
      // get the input value
      const inputValue = inputEvent.target.value;
      // do something with inputValue
    }

    // Note: Search+ handles input internally with logic, debouncing and validation.
    // This onInput prop provides raw access to the input event as the user types.
    props.onInput = handleInput;
      
    return <Component ref={ref} {...props}/>
  })
}

Creative Use Case

Search+ can be added to any frame and fully customized to match your design vision. For example, you can pair it with a CMS Plus Clear+ component to create a fully custom, functional search bar. Clear+ can be configured to target the same Collection+, allowing users to perform real-time searches and easily clear results—all within a design that’s uniquely tailored to your project.

See an example on the demo page.