The live search feature enhances the usability of the Easy Repeater widget by providing a dynamic, real-time search functionality. This feature allows users to quickly find content within repeater items without having to scroll through all available entries. It seamlessly filters the displayed items as you type, offering an intuitive and efficient way to interact with large sets of repeater data.
Please note that this feature is supported only in the Easy Repeater widget and not in repeaters used within native Elementor widgets. It is only available for Pro users of the plugin.
Key Features
- Real-time Filtering: Instantly updates the displayed repeater items as the user types, helping users locate specific content quickly.
- Customizable Exclusions: Specific widgets can be excluded from the search by adding the class `exclude-search`, providing full control over which elements should be searchable.
This feature is only available in the Pro version of the plugin and is designed to optimize the user experience for pages with numerous dynamic items. The search function is responsive and built with a performance focus, ensuring a smooth interaction without compromising load times or efficiency.
Use Cases
The live search feature can be applied in various scenarios to enhance user experience. Below are some practical use cases:
Concert Tour Schedule
Imagine you have a list of concert tour dates around the world. A visitor from London can type “London” in the search bar to see that, out of 50 tour dates, there are 4 concerts happening in London. This makes it easy for users to quickly find relevant information without scrolling through the entire list.
Global Company Branches
A global company with 70 branches across different countries lists all branches on a single page using a repeater. Each branch includes details such as address, contact number, and hours of operation. A user looking for a branch in Toronto can type “Toronto” in the search bar and instantly see the branches in that city. Additionally, typing “Canada” will show all branches in Canada, including branches in cities like Vancouver, making it easy for users to find their nearest branch.
Events Calendar
A community center has a full events calendar using the repeater widget to list upcoming workshops, activities, and gatherings. Each event includes a description, location, and date. A user interested in yoga classes can simply type “yoga” in the search bar and instantly see all the yoga sessions available. Alternatively, typing “June” will show all events happening in June, helping users plan their schedule accordingly.
Team Member Directory
An organization with a large, diverse team has a directory page listing all team members with their roles, contact information, and office locations. Using the live search, a visitor can type “Marketing” to filter the list to only show team members in the marketing department, or type “New York” to see who is based in the New York office. This helps users connect with the right person quickly, enhancing both internal and external communication.
These examples highlight how the live search feature can be used to streamline the user experience, providing an easy and efficient way to interact with complex datasets.
Search Field Settings
The live search feature includes several customizable settings to tailor the functionality to your needs:
- Add Search Field: Enables or disables the live search field for the repeater widget. Set to “Yes” to activate the search functionality.
- Show Label: Determines whether a label should be displayed alongside the search field. Set to “Yes” to show the label or “No” to hide it.
- Search Field Label: Allows you to specify the text for the search field label. This label helps guide users on what the field is for.
- Search Field Placeholder: Defines the placeholder text inside the search input. This text is displayed when the field is empty, providing a hint to users about what they can search for.
Styling Options
The live search feature also offers a wide range of styling options to ensure it integrates seamlessly with your website’s design:
- Text Color: Customize the color of the text in the search field to match your site’s theme.
- Typography: Set the typography options, including font family, size, weight, and more, for the search field text.
- Background: Choose a solid color or gradient for the background of the search field to enhance its visibility.
- Border: Configure border properties such as width, color, and radius to create a visually distinct search field.
- Alignment: Adjust the alignment of the search field (left, center, right, or justified) to fit within the layout of your page.
These settings provide a high level of customization, allowing you to create a search experience that is both functional and aesthetically aligned with your website’s design.
How to Exclude Widgets from Search
To exclude specific widgets from being searchable, follow these steps:
- Open the Template: Navigate to the template that contains the repeater items.
- Select the Widget: Click on the widget you wish to exclude from the search.
- Go to the Advanced Tab: In the Elementor panel, navigate to the “Advanced” tab.
- Add CSS Class: In the “CSS Classes” field, add the class `exclude-search`. This will ensure that the content within this widget is not included in the live search results.