Skip to main content

Search Interface Components

Search UI components and interface elements for building interactive search experiences.

Overview​

The search interface components system provides reusable UI components for building search interfaces with advanced features like autocomplete, suggestions, and real-time search.

Core Features​

  • Search Components: Search bars, filters, and result displays
  • Autocomplete: Real-time search suggestions
  • Interactive Elements: Faceted search, filters, and sorting
  • Responsive Design: Mobile and desktop optimized
  • Customization: Themable and customizable components

Usage Examples​

Basic Search Interface​

from recoagent.search_interface.components import SearchInterface

# Create search interface
search_interface = SearchInterface(
    placeholder="Search documents...",
    enable_autocomplete=True,
    enable_filters=True
)

# Render search interface
search_interface.render()

Advanced Search Components​

from recoagent.search_interface.components import AdvancedSearchInterface

# Create advanced search interface
advanced_interface = AdvancedSearchInterface(
    components={
        "search_bar": SearchBar(placeholder="Enter your query..."),
        "filters": FilterPanel(filters=["category", "date", "author"]),
        "results": ResultsList(enable_pagination=True),
        "suggestions": SuggestionPanel(max_suggestions=5)
    }
)

# Configure interface
advanced_interface.configure({
    "theme": "dark",
    "layout": "sidebar",
    "enable_voice_search": True
})

API Reference​

SearchInterface Methods​

render() -> str​

Render search interface

Returns: HTML string

configure(config: Dict) -> None​

Configure interface settings

Parameters:

  • config (Dict): Configuration options

AdvancedSearchInterface Methods​

add_component(name: str, component: Component) -> None​

Add component to interface

Parameters:

  • name (str): Component name
  • component (Component): Component instance

See Also​