Search Widgets

Introduction

eDirectory offers two powerful and customizable widgets to enhance search functionality on your website: the Search box and the Search bar. Each has its unique strengths and design approach, allowing site managers to choose the best fit for their site's layout and user experience.

🔍 1. The Search Box Widget — Unified and Flexible

The newly unified Search Box widget provides a powerful and flexible solution for adding search functionality to your eDirectory site. With enhanced customization options and seamless design integration, it simplifies configuration while improving the user experience.

🛠️Key Features and Configuration Instructions

1. Accessing the Search Box Widget

To configure the Search Box:

• Navigate to Design > Page Editor > Home Page (This example uses the Home Page, but the widget can be added to any page.)

• Locate the Search Box widget and click Edit to access its configuration settings.

2. Search Fields

This widget has the following fields:

• Keyword search;
• Location search.

3. Customizable Labels and Placeholders

You can personalize the label and placeholder text for a better user experience:

• Search Label 1: Main heading text at the top of the search box.
• Search Label 2: Subheading text displayed below the main label.
• Placeholder for Keyword Field: Text shown inside the "Search by keyword" input.
• Placeholder for Location Field: Text shown inside the "Search by location" input.

4. Dynamic Slide Sets

You can add up to five (5) slide sets. Each set includes:

• A title
• A description
• Optional links to specific internal or external pages

These slide sets can enhance visual engagement and help direct users to key areas of your site.

5. Custom Content Positioning

Control the alignment of your search box content (labels and fields). Choose from:

• Left
• Center
• Right

6. Header Integration

The Search Box widget integrates seamlessly with the Header Widget, offering two display options:

• Transparent Header Integration: allows background images in the search box to show through the transparent header.

• Requirements:

  • The Search Box must be placed directly below the Header widget.

    

    
    
  • At least one background image must be added to the Search Box.
• To enable:
  • Click Edit on the Header widget

• Check the "Transparent" option

• Colored Header Integration:

• When the header uses a solid background color, the search box adapts to maintain a cohesive look across your site.

  

🌟 Benefits of the Unified Search Box Widget

• Simplified Widget Management: Consolidates two widgets into one, reducing complexity and streamlining workflows.
• Increased Customization: Offers greater control over slide sets and content positioning, enabling tailored search interfaces.
• Enhanced Design Integration: Seamlessly integrates with the header widget, ensuring visual consistency.
• Improved User Experience: Provides a more flexible and visually appealing search experience for site visitors.

🧭 2. The Search Bar Widget — Simple and Space-Saving

The Search bar is a more compact alternative to the Search box. It offers essential search functionality in a thinner format, ideal for minimalist or content-focused designs.

🛠️ Key Features and Configuration Instructions

1. Accessing the Search Bar Widget

To configure the Search Bar:

• Navigate to Design > Page Editor > Listing Home Page (This example uses the Listings Home Page, but the widget can be added to any page.)

• Locate the Search Bar widget and click Edit to access its configuration settings.

2. Simplified Layout:

No background image or slides — it takes up less vertical space and keeps things clean.

3. Search Fields Available:

• Keyword
• Location
• Date (available only on the Events page)

4. Customizable Placeholders:

You can personalize the placeholder text for a better user experience:

• Placeholder for search by keyword field: Text shown inside the "Search by keyword" input.
• Placeholder for search by location field:Text shown inside the "Search by location" input.
• Placeholder for search by date field: Text shown inside the "Search by date" input. (available only on the Events page)

5. Color Customization:

Choose between:

• Brand color
• Neutral color
• White background

✅ Benefits of the Search Bar Widget:

• Compact design = saves screen space
• Clean, distraction-free layout
• Quick and intuitive search usability
• Works great on pages where visual media isn’t required

🎯 Choosing the Right Widget

🔎 How Search Functionality Works (Applies to Both Widgets)

Regardless of whether you choose the Search Box or the Search Bar, both widgets use the same powerful search engine to deliver relevant results to your users. Here's how the search functionality operates across different content types in eDirectory:

📌 Keyword Search Field

The Keyword search field analyzes several key areas of your content to return the most relevant results:

• Listing Title: Returns results that match the exact or partial text found in listing titles.

• Categories: If a user selects a category from the dropdown list, the system will return listings within that selected category.

• Summary Description: Matches the user input with the content in the listing's summary description.

• Search Keywords: includes matches from the "keywords for search" field added to each listing.

📍 Location Search Field

The Location field supports flexible location-based searches by checking for matches in:

• Address: Matches listings where the typed location corresponds to the address field.

• Zip Code: Displays results where the zip/postal code aligns with the user’s input.

• Location Fields: includes results where the input matches any part of the location hierarchy—such as city, state, or country.

✅ Conclusion

eDirectory’s dual search widgets — Search box and Search bar — empower site managers to tailor the search experience based on design goals and user needs. Whether you want a bold, image-driven interface or a sleek, minimal look, you have the tools to create a seamless and effective search experience.

By leveraging the full capabilities of both widgets, you can build a site that not only looks professional, but also helps users find what they need faster.