ns-search-select

Overview

The ns-search-select component renders a searchable dropdown for field options. It stores the selected option value in field.value and emits change events when a selection is made or cleared.

Props and events

• field: required field definition.
• name, placeholder, and leading: optional compatibility props.
• Emits change with the selected value or null.
• Emits saved when a dynamic component creates a new item.

Dynamic component support

If field.component is provided, the component shows an add button. Clicking it opens the named component from nsExtraComponents or nsComponents inside a popup and passes the current field plus field.props.

Dependent refresh

When field.subject and field.refresh are provided, the component can refresh its options after another field changes. The watched field is configured by field.refresh.watch, and the new options are fetched from field.refresh.url.

const field = {
    name: 'customer_id',
    label: 'Customer',
    type: 'search-select',
    value: null,
    options: [{ label: 'John Doe', value: 1 }],
    component: 'ns-customer-popup',
    props: {},
    errors: []
};

<ns-search-select :field="field" @change="handleCustomerChange" @saved="reloadCustomers" />