ebuilder-component-eb-search

name	ebuilder-component-eb-search
description	Deep component skill for eb-search. USE FOR: prop-safe YAML generation, nested prop authoring, and event wiring for eb-search in eBuilder component YAML.

eb-search Component Skill

General Docs

Use eb-search to provide a search input with autocomplete suggestions. By default it renders a-input-search; set useSearchInput: false to render a plain a-input while keeping autocomplete suggestions. Suggestions can come from static options, static source.data, or dynamic source.query/source.task. Source files in ebuilder_engine_repository: ebuilder-js-sdk/packages/Vue/src/form/EBSearch

eb-search supports 3 events: suggest, select, search. In event context, selected/typed value is available via $event.value.

Main Props

name	type	description
useSearchInput	boolean	Whether to render search input (true) or plain input (false). Default is true.
autoFocus	boolean	Whether auto focus.
disable	boolean	Whether disable.
icon	string | null	Icon to show next to the search input. Default is magnifying glass. Set null to hide search button/icon.
options	{ value: string; label: string; }[]	Static autocomplete options.
source	{ data?: Record<string, unknown>[]; query?: QueryConfig; task?: TaskConfig; label: string | (($entry: unknown) => string); value: string; autoSelectOnFirstLoad?: boolean; params?: Record<string, unknown>; }	Dynamic or static suggestion source. query/task receives merged params including value and searchTerm.
size	"small" | "middle" | "large"	Size of the input. Default is middle.
trigger	"blur" | "change"	Sync strategy to form value. change syncs while typing (default), blur syncs on blur.
on.suggest	eBuilder events emit	Triggered when user types. If defined, built-in dynamic source loading is skipped and this handler is used.
on.select	eBuilder events emit	Triggered when a suggestion is selected. If not defined, component falls back to calling on.search.
on.search	eBuilder events emit	Triggered when user submits search. If not defined, component uses first option prefix match to choose value; if no option exists, typed value is used as-is.

YAML Examples

Story Example 1

children:
  - name: eb-form
    props:
      fields:
        - name: default
          ebFormControl:
            name: eb-search
            label: Default search
            props:
              icon: 'fas,magnifying-glass-plus'
              autoFocus: true
              useSearchInput: true
              options:
                - value: 'option1'
                  label: 'Option 1'
                - value: 'option2'
                  label: 'Option 2'
                - value: 'option3'
                  label: 'Option 3'
              on:
                suggest:
                  emit:
                    name: eb-toast
                    params:
                      message: ${{ `on.suggest ${$event.value}` }}
                select:
                  emit:
                    name: eb-toast
                    params:
                      message: ${{ `on.select ${$event.value}` }}
                search:
                  emit:
                    name: eb-toast
                    params:
                      message: ${{ `on.search ${$event.value}` }}

Story Example 2

children:
  - name: eb-form
    props:
      fields:
        - name: searchFromSource
          ebFormControl:
            name: eb-search
            label: Search from source fallback
            props:
              source:
                label: name
                value: id
                query:
                  name: eb-search-suggest-source
                  params: {}

Story Example 3

children:
  - name: eb-form
    props:
      fields:
        - name: searchWithBlurTrigger
          defaultValue: initial-value
          on:
            change:
              emit:
                name: eb-toast
                params:
                  message: ${{ `Field changed from ${$event.oldValue} to ${$event.value}` }}
          ebFormControl:
            name: eb-search
            label: Search sync on blur
            props:
              trigger: blur
              source:
                label: name
                value: id
                query:
                  name: eb-search-suggest-source-blur
                  params: {}

Authoring Notes

• Prefer locale keys for user-facing strings in labels/placeholders/tooltips.
• Keep business logic in configs tasks/resources/queries; keep component YAML focused on UI composition and event wiring.
• For event listeners defined as on.event_name, wire emit chains declaratively and keep handlers short.
• If you need built-in suggestion loading from source.query or source.task, do not set on.suggest.
• Use trigger: blur when form change events should fire only after focus leaves the input.