Base Autocomplete

The BaseAutocomplete component is a great component when we have a lot of options and we need to filter them, it is a great component to use in forms, and it is very customizable.

Try to test the autocomplete component below, you can search for any state in the USA/Canada/Mexico.

Search state

Model Value

The model value is a prop that we use to control the selected option in the autocomplete component. It is a two-way binding prop, so we can use it to set the initial value and to get the selected option.

<template>
  <div style="width: 400px; margin: auto; ">
    <BaseAutocomplete
        label="Model Value"
        :options="options"
        v-model="myValue"
    />
    <p>Model Value: <br><span style="font-weight: bold; color: black;">{{ myValue }}</span> </p>
  </div>
</template>

<script setup lang="ts">
import { BaseAutocomplete, GroupOption, NormalOption } from 'vuetage'

const myValue = ref<NormalOption>({ text: '', value: ''})

const options = ref<GroupOption[]>([
  {
    group: 'Group 1',
    items: [
      { value: '1', text: 'Option 1' },
      { value: '2', text: 'Option 2' },
      { value: '3', text: 'Option 3' },
    ],
  },
  {
    group: 'Group 2',
    items: [
      { value: '4', text: 'Option 4' },
      { value: '5', text: 'Option 5' },
      { value: '6', text: 'Option 6' },
    ],
  },
])

</script>

The code above shows the result that you can see below.

Model Value

Model Value:
{ "text": "", "value": "" }

Props

Options

The options prop is an array of objects that we use to set the options in the autocomplete component. The options prop can be an array of NormalOption or GroupOption.

NormalOption

The NormalOption is an object with two properties, the text property that is the text that will be shown in the autocomplete component, and the value property that is the value that will be returned when the option is selected.

interface NormalOption {
  text: string
  value: string
}

The result of a NormalOption is shown below.

Normal Option

GroupOption

The GroupOption is an object with two properties, the group property that is the group name that will be shown in the autocomplete component, and the items property that is an array of NormalOption.

interface GroupOption {
  group: string
  items: NormalOption[]
}

The result of a GroupOption is shown below.

Group Option

Filter

There are props to control the filter of the options.

Auto Filter

The autoFilter prop is a boolean that we use to set the filter state in the autocomplete component. When the autoFilter is false, the options will not be filtered automatically when the user types in the input.

This can be useful when you want to create a custom filter, so you can do that outside the component and pass the filtered options to the component.

The default is true.

<BaseAutocomplete label="Auto Filter" :options="options" :autoFilter="false"/>

Auto Filter

Case Sensitive Filter

Define if we will filter considering the difference between uppercase and lowercase letters.

The default is false.

<BaseAutocomplete label="Case Sensitive Filter" :options="options" :caseSensitiveFilter="true"/>

Case Sensitive Filter

Variant

Variant is a prop that defines one of some predefined styles available to each case as you need.

As we are using the BaseTextField component under the hood, we can use the same variant prop values to change the style of the component.

Default

The primary variant can be used just calling the component, this is the default value for "variant" prop.

<BaseAutocomplete label="Default" :options="options"/>

Default

Outlined

The outlined variant can be used with the props "variant" with value "outlined" as show below:

<BaseAutocomplete label="Outlined" :options="options" variant="outlined"/>

Outlined

Underlined

The underlined variant can be used with the props "variant" with value "underlined" as show below:

<BaseAutocomplete label="Underlined" :options="options" variant="underlined"/>

Underlined

Dark

The dark variant can be used with the props "variant" with value "dark" as show below:

<BaseAutocomplete label="Dark" :options="options" variant="dark"/>

Dark

Label

The label prop is a string that we use to set the label in the autocomplete component.

<BaseAutocomplete label="Label" :options="options"/>

Label

Loading

The loading prop is a boolean that we use to set the loading state in the autocomplete component.

<BaseAutocomplete label="Loading" :options="options" :loading="true"/>

There are some props related to the loading state that we can use to customize the loading state.

props	type	default	description
loading	boolean	false	Define if the component is in loading.
useBorderLoading	boolean	false	Define if the loading will be an spinner or border loading style.
loadingColor	string	black	Define the color of spinner or border loading.
loadingSize	string	small(0.7em) for spinner or 2px for border loading	Define the size of spinner or border loading.
disableOnLoading	boolean	false	Define if when the props "loading" be true the field will be disabled or not.
menuLoading	boolean	false	Define if the the menu will be in loading state.
menuLoadingText	string	Loading more items	Define the text that will be shown when the menu is in loading state.

Disabled

The disabled prop is a boolean that we use to set the disabled state in the autocomplete component.

<BaseAutocomplete label="Disabled" :options="options" :disabled="true"/>

Disabled

Icons

We can add icons to the input, we have 2 kinds of icons, the left icon, and the right icon. The available icons are the same that we can use in font awesome. But if you have another library that adds an icon using this syntax "<i class="icon"></i>", you can use it passing it as a prop value.

Left Icon

The left icon can be used with the prop "leftIcon" as shown below:

<BaseAutocomplete label="Left Icon" :options="options" leftIcon="fa fa-search"/>

Left Icon

Right Icon

The right icon can be used with the prop "rightIcon" as shown below:

<BaseAutocomplete label="Right Icon" :options="options" rightIcon="fa fa-search"/>

Right Icon

Styles

There are some props to help you to customize the select component. For these props, you can use the same syntax that you use in the style of some vue component.

You can also edit the hover passing the style as an object inside the hover key, as show below.

<BaseAutocomplete
  label="Styles" 
  :options="options" 
  :inputFieldStyle="{
      backgroundColor: '#90ee90',
      color: 'green',
      // You can use any style that you use in the style prop. It will be applied when the mouse is over the component.
      hover: { 
        backgroundColor: 'yellow',
        color: 'green',
      }
  }"
/>

Input Style

The inputStyle prop is an object that we use to set the style of the input in the autocomplete component.

<BaseAutocomplete
  label="Input Style" 
  :options="options" 
  :inputStyle="{ backgroundColor: '#90ee90', color: 'green' }"
/>

Input Style

Label Style

The labelStyle prop is an object that we use to set the style of the label in the autocomplete component.

<BaseAutocomplete
  label="Label Style" 
  :options="options" 
  :labelStyle="{ backgroundColor: '#90ee90', color: 'green' }"
/>

Label Style

The menuStyle prop is an object that we use to set the style of the menu in the autocomplete component.

<BaseAutocomplete
  label="Menu Style" 
  :options="options" 
  :menuStyle="{ backgroundColor: '#90ee90', color: 'green' }"
/>

Menu Style

Item Style

The itemStyle prop is an object that we use to set the style of the items in the autocomplete component.

<BaseAutocomplete
  label="Item Style" 
  :options="options" 
  :itemStyle="{ backgroundColor: '#90ee90', color: 'green' }"
/>

Item Style

Group Style

The groupStyle prop is an object that we use to set the style of the group in the autocomplete component.

<BaseAutocomplete
  label="Group Style" 
  :options="options" 
  :groupStyle="{ backgroundColor: '#90ee90', color: 'green' }"
/>

Group Style

Custom Class

The customClass prop is a string that we use to set a custom class in the autocomplete component. This is useful to set custom css using tailwind, bootstrap, or other thing like that.

Maybe you need to configure something, any problem to use external css frameworks, contact me or report the issue.

<BaseAutocomplete
  label="Custom Class" 
  :options="options" 
  customClass="mt-2 bg-green-200 text-green-800"
/>

Events

There are 2 events that we usually will use.

update:model-value

The modelValue event is emitted when the selected option is changed.

input

The input event is emitted when the input value is changed. When the user is typing in the input, this event will be emitted. This can be useful to do a request to API and update the options.

Others

Slots

There are some slots that we can use to customize the autocomplete component.

The menu slot is used to customize the menu that is shown when the user clicks in the input. You can use the BaseMenu component from vuetage if you want to use the same style of the autocomplete component.

item

The item slot is used to customize the items that are shown in the menu. You can use the BaseItem component from vuetage if you want to use the same style of the autocomplete component.

no-options

The no-options slot is used to customize the message that is shown when there are no options to show in the BaseMenu.

menu-loading

The menu-loading slot is used to customize the loading state of the menu.