DAutocomplete

DAutocomplete - A type-safe wrapper around Bootstrap Vue Next’s BAutocomplete component. A text input with a filtered dropdown of suggestions (typeahead / combobox). Pass options and bind v-model; supports multiple selection and a custom filterFunction.

Live Examples

Country

Start typing to filter the list.

Selected: —

Searchable single-select with a null option

null-option pins a selectable "no selection" row to the top of the list. It is never filtered out as you type, and selecting it sets the model back to null. Option values round-trip unchanged — the numeric ids below come back as numbers.

Selected id: —(type: object)

Show Code

Extra props (beyond Bootstrap Vue Next)

DAutocomplete adds one prop on top of BAutocomplete’s API to make it a complete searchable single-select:

Prop	Type	Default	Description
null-option	boolean | string	false	Prepend a pinned, never-filtered, selectable “no selection” row whose value is null. true uses the label None; a string sets a custom label. Selecting it sets the model to null (which reads as no selection — the clear ✕ hides and the placeholder shows). When a custom filterFunction is supplied it composes: the null option stays pinned and your filter runs on the remaining options.

Option values round-trip unchanged — a numeric value comes back as a number, so there is no String()/Number() dance. (DXTable’s string-value column filters are unaffected; it builds its own “All” option and does not use null-option.)

Slots

This component forwards all slots dynamically from the underlying Bootstrap Vue Next component.

Bootstrap Vue Next Wrapper

This is a lightweight type-safe wrapper around the corresponding Bootstrap Vue Next component. It provides API stability and forwards all props, events, and slots.

For complete API documentation (props, events, methods), refer to the Bootstrap Vue Next documentation.