Source: https://tailwindcss.com/plus/ui-blocks/documentation/autocomplete

• • Marketing

  • Application UI

  • Ecommerce

  • Documentation

• Getting started

  • Getting set up

  • Using HTML

  • Using React

  • Using Vue

  • Assets

• Elements

  • Introduction

  • Autocomplete

  • Command palette

  • Dialog

  • Disclosure

  • Dropdown menu

  • Popover

  • Select

  • Tabs

5-day Mini-Course

Build UIs that don’t suck.

Short, tactical video lessons from the creator of Tailwind CSS, delivered directly to your inbox every day for a week.

Get the free course

Autocomplete

A commercial license is required to use Tailwind Plus Elements. Purchase Tailwind Plus to obtain a license.

The <el-autocomplete> component is a text input that allows users to enter arbitrary values or select from a list of filtered suggestions. It behaves like a native<datalist>, but offers greater control over styling.

Component API

<el-autocomplete>

The main autocomplete component that manages form integration, filtering, and coordinates with its child components

| | | | --- | --- | | CSS variables (Read-only) | | | --input-width | Provides the width of the input element. | | --button-width | Provides the width of the button element. |

<el-options>

The options container that handles the popover behavior.

| | | | --- | --- | | Attributes | | | popover | Required to enable the popover behavior. | | anchor | Configures the way the options are anchored to the button. | | anchor-strategy | Sets the position CSS property of the popover to eitherabsolute (default) or fixed. | | CSS variables | | | --anchor-gap | Sets the gap between the anchor and the popover. | | --anchor-offset | Sets the distance that the popover should be nudged from its original position. | | Data attributes (Read-only) | | | data-closed | Present before transitioning in, and when transitioning out. | | data-enter | Present when transitioning in. | | data-leave | Present when transitioning out. | | data-transition | Present when transitioning in or out. | | Methods | | | togglePopover() | Toggles the options visibility. | | showPopover() | Shows the options. | | hidePopover() | Hides the options. |

<el-option>

Individual selectable option within the autocomplete.

| | | | --- | --- | | Attributes | | | value | The value of the option (required for selection). | | disabled | Whether the option is disabled. | | ARIA attributes (Read-only) | | | aria-selected | Present when the option is selected. |

Examples

Basic example

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Positioning the dropdown

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Setting the dropdown width

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Adding transitions

To view the complete documentation, you must own a Tailwind Plus license and be signed in .

Disabling the input

To view the complete documentation, you must own a Tailwind Plus license and be signed in .