We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

AutoComplete for Vue

The AutoComplete is a textbox component that provides a list of suggestions to select from as the user types. This has several out of box features such as data binding, filtering, grouping, UI customization, accessibility, and more.


Vue Autocomplete with Data binding

Data binding

You can bind data from a variety of data sources in the array of primitive data, JSON data collections, or remote data source using different kinds of adaptors such as OData, OData V4, URL, JSON, and Web API. This uses Essential JS 2’s data manager to manage data and also has customization option for data request and processing.


Filtering

Built-in filtering support with a rich set of filtering configurations is available to match all your application needs.

Vue Autocomplete with Filtertype

Filter type

Provides support to filter data based on starts with, ends with, and contains.

Vue Autocomplete with Custom filtering

Custom filtering

You can customize the filter query or use your own filter libraries to set filtered data.

Vue Autocomplete with Diacritic sensitivity

Diacritic sensitivity

AutoComplete has diacritic character sensitivity. This behavior can be turned on/off.

Vue Autocomplete with limit suggestion items

Limits suggestion items

Possibility to limit the number of suggestions to be displayed in the filtered list.

Vue Autocomplete with Ignore filter text casing

Ignore filter text casing

You can filter data with or without considering the casing for typed characters.

Vue Autocomplete with Minimum search characters

Minimum search characters

Provides option to set the number of characters required to filter.


Highlight matched text

You can configure different visual appearances for the matching text of each suggestion.

Vue Autocomplete with Highllighted matched text


UI customization

Controls the appearance of each item displayed in the suggestion list using templating.

Vue Autocomplete with Item template

Item template

Defines custom appearance of each suggestion item using item template.

Vue Autocomplete with Header template in suggestion list

Header template

Designs its own header for the suggestion list using header template.

Vue Autocomplete with Footer template in suggestion list

Designs its own custom footer for the suggestion list using footer template.

Vue Autocomplete with Icons in suggestion list

Icons

Adds icons to each suggestion item.

Vue Autocomplete with No Record template in suggestion list

Empty record

Configures custom look if there is no suggestion to display.


AutoFill

The AutoComplete component has autofill option. This completes the word that the user types from the suggestion text. The end user can search for the items easily.

Vue Autocomplete with AutoFill


Suggestion list

Generates a suggestion list to the users as they type in the textbox.

Vue Autocomplete with Suggestion list dimension adjustment

Adjustable dimension

The width and height of the suggestion list is adjustable.

Vue Autocomplete with Prevent suggestion list

Avoid suggestion list

It is possible to hide the default suggestion list to bind the search result onto some other control such as grid.


Grouping

Groups the suggestions based on different categories with individual header.

Vue Autocomplete with Grouping


Vue Autocomplete with Floating label

Floating label

Developer can control whether the placeholder should float or not.


Responsiveness

Provides responsive mode that gives adaptive redesigned UI appearance for mobile devices and recognizes touch gestures.


Accessibility

  • Fully supports WAI-ARIA accessibility that makes list view accessible to on-screen readers and assistive devices.

  • Follows WAI-ARIA best practices for implementing keyboard interaction.

  • Designed the UI element visuals such as foreground color, background color, line spacing, text, and images based on WCAG 2.0 standard.

  • Supports right to left (RTL) direction for users working in right-to-left languages like Hebrew, Arabic, or Persian.

Developer friendly APIs

Developers can customize all UI elements and control their behaviors according to the end user’s requirement using its rich set of client-side APIs.


45+ VUE COMPONENTS

Transform your applications today by downloading our free evaluation versionDownload Free Trial

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.