Autocomplete API Reference

Props

Prop	Type	Default	Description
items	Array	[]	Array of items to display in the autocomplete dropdown
modelValue	String/Number/Array/Object	null	Selected value(s) for v-model binding
itemText	String	'text'	Property name for item display text
itemValue	String	'value'	Property name for item value
itemDisabled	String	'disabled'	Property name for item disabled state
multiple	Boolean	false	Enable multiple item selection
filterFunction	Function	null	Custom filter function (item, searchText) => boolean
selectedOnTop	Boolean	false	Show selected items at the top of the list
placement	String	'bottom'	Dropdown placement relative to trigger. Options: 'top', 'bottom', 'left', 'right'
offset	Array	[0, 0.125]	Offset from trigger element [x, y] in rem units
menuWidth	String/Number	null	Explicit dropdown width (matches trigger width when null)
matchTriggerWidth	Boolean	true	Match dropdown width to trigger width
placeholder	String	''	Placeholder text for the input field
disabled	Boolean	false	Disable the autocomplete input
loading	Boolean	false	Show loading spinner in input and dropdown
clearable	Boolean	false	Show clear button when there's a selection or search text
readonly	Boolean	false	Make the input field readonly

Events

Event	Payload	Description
update:modelValue	value	Emitted when selection changes (for v-model)
change	value	Emitted when selection changes
select	item, value	Emitted when an item is selected
remove	item, value	Emitted when an item is removed (multiple mode)
search	searchText	Emitted when search text changes

Slots

Slot	Props	Description
no-data	-	Custom content when no items match the search or no items are available

Methods

Method	Description
focus()	Focus the input field
blur()	Blur the input field
openMenu()	Open the dropdown menu
closeMenu()	Close the dropdown menu
search(value)	Set the search text programmatically

Basic Usage

<template>
  <OAutoComplete
    v-model="selectedValue"
    :items="items"
    placeholder="Search and select..."
    @select="handleSelect"
  />
</template>

<script setup>
import { ref } from "vue";

const selectedValue = ref(null);
const items = ref([
  { text: "Option 1", value: "option1" },
  { text: "Option 2", value: "option2" },
  { text: "Option 3", value: "option3" },
]);

const handleSelect = (item, value) => {
  console.log("Selected:", item, value);
};
</script>

Item Structure

Items can be provided in different formats:

Object Format (Recommended)

const items = [
  { text: "Apple", value: "apple", disabled: false },
  { text: "Banana", value: "banana" },
  { text: "Orange", value: "orange" },
];

Simple Array Format

const items = ["Apple", "Banana", "Orange"];
// text and value will be the same string

Custom Property Names

<OAutoComplete
  v-model="selected"
  :items="items"
  item-text="name"
  item-value="id"
  item-disabled="isDisabled"
/>

Filter Function

You can provide a custom filter function for advanced filtering:

<template>
  <OAutoComplete
    v-model="selected"
    :items="items"
    :filter-function="customFilter"
  />
</template>

<script setup>
const customFilter = (item, searchText) => {
  // Custom filtering logic
  const text = item.name.toLowerCase();
  const search = searchText.toLowerCase();
  
  // Example: Match in multiple fields
  return text.includes(search) || 
         item.description?.toLowerCase().includes(search);
};
</script>

Multiple Selection

<template>
  <OAutoComplete
    v-model="selectedValues"
    :items="items"
    :multiple="true"
    placeholder="Select multiple items..."
  />
</template>

<script setup>
import { ref } from "vue";

const selectedValues = ref([]);
const items = ref([
  { text: "Vue.js", value: "vue" },
  { text: "React", value: "react" },
  { text: "Angular", value: "angular" },
]);
</script>