Autocomplete

Extended input that provide suggestions while the user types

Examples

Base

Find a JS framework

Selected:

Show code

Objects array

Open dropdown on focusKeep-first

Find a name

Selected:

Show code

HTMLJS

html

<section>
    <o-field grouped>
        <o-switch v-model="openOnFocus">Open dropdown on focus</o-switch>
        <o-switch v-model="keepFirst">Keep-first</o-switch>
    </o-field>

    <o-field label="Find a name">
        <o-autocomplete
            v-model="name"
            placeholder="e.g. Anne"
            :keep-first="keepFirst"
            :open-on-focus="openOnFocus"
            :data="filteredDataObj"
            field="user.first_name"
            @select="(option) => (selected = option)" />
    </o-field>
    <p><b>Selected:</b> {{ selected }}</p>
</section>

html

import { ref, computed } from "vue";

const data = [
    {
        id: 1,
        user: { first_name: "Jesse", last_name: "Simmons" },
        date: "2016/10/15 13:43:27",
        gender: "Male",
    },
    {
        id: 2,
        user: { first_name: "John", last_name: "Jacobs" },
        date: "2016/12/15 06:00:53",
        gender: "Male",
    },
    {
        id: 3,
        user: { first_name: "Tina", last_name: "Gilbert" },
        date: "2016/04/26 06:26:28",
        gender: "Female",
    },
    {
        id: 4,
        user: { first_name: "Clarence", last_name: "Flores" },
        date: "2016/04/10 10:28:46",
        gender: "Male",
    },
    {
        id: 5,
        user: { first_name: "Anne", last_name: "Lee" },
        date: "2016/12/06 14:38:38",
        gender: "Female",
    },
    {
        id: 6,
        user: { first_name: "Sara", last_name: "Armstrong" },
        date: "2016/09/23 18:50:04",
        gender: "Female",
    },
    {
        id: 7,
        user: { first_name: "Anthony", last_name: "Webb" },
        date: "2016/08/30 23:49:38",
        gender: "Male",
    },
    {
        id: 8,
        user: { first_name: "Andrew", last_name: "Greene" },
        date: "2016/11/20 14:57:47",
        gender: "Male",
    },
    {
        id: 9,
        user: { first_name: "Russell", last_name: "White" },
        date: "2016/07/13 09:29:49",
        gender: "Male",
    },
    {
        id: 10,
        user: { first_name: "Lori", last_name: "Hunter" },
        date: "2016/12/09 01:44:05",
        gender: "Female",
    },
    {
        id: 11,
        user: { first_name: "Ronald", last_name: "Wood" },
        date: "2016/12/04 02:23:48",
        gender: "Male",
    },
    {
        id: 12,
        user: { first_name: "Michael", last_name: "Harper" },
        date: "2016/07/27 13:28:15",
        gender: "Male",
    },
    {
        id: 13,
        user: { first_name: "George", last_name: "Dunn" },
        date: "2017/03/07 12:26:52",
        gender: "Male",
    },
    {
        id: 14,
        user: { first_name: "Eric", last_name: "Rogers" },
        date: "2016/06/07 05:41:52",
        gender: "Male",
    },
    {
        id: 15,
        user: { first_name: "Juan", last_name: "Meyer" },
        date: "2017/02/01 04:56:34",
        gender: "Male",
    },
    {
        id: 16,
        user: { first_name: "Silvia", last_name: "Rosa" },
        date: "2017/01/26 11:50:04",
        gender: "Female",
    },
    {
        id: 17,
        user: { first_name: "Lori", last_name: "Cunningham" },
        date: "2016/05/01 10:00:56",
        gender: "Female",
    },
    {
        id: 18,
        user: { first_name: "Charles", last_name: "Graham" },
        date: "2016/05/31 06:43:30",
        gender: "Male",
    },
    {
        id: 19,
        user: { first_name: "Henry", last_name: "Morrison" },
        date: "2016/09/27 16:15:44",
        gender: "Male",
    },
    {
        id: 20,
        user: { first_name: "Albert", last_name: "Mendoza" },
        date: "2016/08/08 05:29:24",
        gender: "Male",
    },
    {
        id: 21,
        user: { first_name: "Ruby", last_name: "Snyder" },
        date: "2017/04/01 12:04:39",
        gender: "Female",
    },
    {
        id: 22,
        user: { first_name: "Jesse", last_name: "Warren" },
        date: "2016/08/20 01:36:38",
        gender: "Male",
    },
    {
        id: 23,
        user: { first_name: "Carlos", last_name: "Ferguson" },
        date: "2016/05/31 10:40:29",
        gender: "Male",
    },
    {
        id: 24,
        user: { first_name: "Melissa", last_name: "Peters" },
        date: "2016/07/23 00:41:54",
        gender: "Female",
    },
    {
        id: 25,
        user: { first_name: "Arthur", last_name: "Garza" },
        date: "2017/03/11 14:11:37",
        gender: "Male",
    },
    {
        id: 26,
        user: { first_name: "Joe", last_name: "Berry" },
        date: "2016/07/09 15:16:56",
        gender: "Male",
    },
    {
        id: 27,
        user: { first_name: "Joseph", last_name: "Bishop" },
        date: "2016/10/04 19:44:54",
        gender: "Male",
    },
    {
        id: 28,
        user: { first_name: "Sarah", last_name: "Harper" },
        date: "2016/09/23 05:09:11",
        gender: "Female",
    },
    {
        id: 29,
        user: { first_name: "Christopher", last_name: "Fuller" },
        date: "2016/04/12 00:05:35",
        gender: "Male",
    },
    {
        id: 30,
        user: { first_name: "Alan", last_name: "Mendoza" },
        date: "2016/04/22 10:48:02",
        gender: "Male",
    },
    {
        id: 31,
        user: { first_name: "James", last_name: "Davis" },
        date: "2017/01/16 15:17:03",
        gender: "Male",
    },
    {
        id: 32,
        user: { first_name: "Scott", last_name: "Welch" },
        date: "2016/10/04 23:31:51",
        gender: "Male",
    },
    {
        id: 33,
        user: { first_name: "Mildred", last_name: "Myers" },
        date: "2016/11/23 13:46:18",
        gender: "Female",
    },
    {
        id: 34,
        user: { first_name: "Victor", last_name: "Martinez" },
        date: "2016/04/06 17:05:07",
        gender: "Male",
    },
    {
        id: 35,
        user: { first_name: "Susan", last_name: "Medina" },
        date: "2016/12/09 10:33:37",
        gender: "Female",
    },
    {
        id: 36,
        user: { first_name: "Judy", last_name: "Long" },
        date: "2016/07/26 16:19:04",
        gender: "Female",
    },
    {
        id: 37,
        user: { first_name: "Joan", last_name: "Myers" },
        date: "2016/09/22 04:55:54",
        gender: "Female",
    },
    {
        id: 38,
        user: { first_name: "Rachel", last_name: "Gonzales" },
        date: "2016/07/15 13:56:38",
        gender: "Female",
    },
    {
        id: 39,
        user: { first_name: "Roger", last_name: "Hunt" },
        date: "2016/08/14 10:43:11",
        gender: "Male",
    },
    {
        id: 40,
        user: { first_name: "Dorothy", last_name: "Howard" },
        date: "2016/06/19 05:34:49",
        gender: "Female",
    },
    {
        id: 41,
        user: { first_name: "Eugene", last_name: "Lynch" },
        date: "2016/12/24 08:19:24",
        gender: "Male",
    },
    {
        id: 42,
        user: { first_name: "Kathy", last_name: "Webb" },
        date: "2017/04/01 21:09:05",
        gender: "Female",
    },
    {
        id: 43,
        user: { first_name: "Antonio", last_name: "White" },
        date: "2017/02/10 06:51:20",
        gender: "Male",
    },
    {
        id: 44,
        user: { first_name: "Louis", last_name: "Spencer" },
        date: "2016/10/08 02:20:22",
        gender: "Male",
    },
    {
        id: 45,
        user: { first_name: "Andrea", last_name: "Marshall" },
        date: "2016/09/04 10:59:57",
        gender: "Female",
    },
    {
        id: 46,
        user: { first_name: "Eugene", last_name: "Sims" },
        date: "2017/03/15 06:39:48",
        gender: "Male",
    },
    {
        id: 47,
        user: { first_name: "Mildred", last_name: "Gibson" },
        date: "2016/04/18 06:43:54",
        gender: "Female",
    },
    {
        id: 48,
        user: { first_name: "Joan", last_name: "Arnold" },
        date: "2016/12/16 04:52:23",
        gender: "Female",
    },
    {
        id: 49,
        user: { first_name: "Jesse", last_name: "Schmidt" },
        date: "2016/06/11 02:44:33",
        gender: "Male",
    },
    {
        id: 50,
        user: { first_name: "David", last_name: "Frazier" },
        date: "2017/02/15 21:46:30",
        gender: "Male",
    },
    {
        id: 51,
        user: { first_name: "Nicholas", last_name: "Howell" },
        date: "2016/11/01 15:08:31",
        gender: "Male",
    },
    {
        id: 52,
        user: { first_name: "Douglas", last_name: "Chapman" },
        date: "2017/02/08 03:33:24",
        gender: "Male",
    },
    {
        id: 53,
        user: { first_name: "Bruce", last_name: "Simmons" },
        date: "2016/07/14 12:11:17",
        gender: "Male",
    },
    {
        id: 54,
        user: { first_name: "Antonio", last_name: "George" },
        date: "2016/11/07 19:12:55",
        gender: "Male",
    },
    {
        id: 55,
        user: { first_name: "Chris", last_name: "Marshall" },
        date: "2016/07/03 12:11:45",
        gender: "Male",
    },
    {
        id: 56,
        user: { first_name: "Ashley", last_name: "Hudson" },
        date: "2016/10/14 21:08:05",
        gender: "Female",
    },
    {
        id: 57,
        user: { first_name: "Alan", last_name: "Edwards" },
        date: "2017/03/22 21:10:25",
        gender: "Male",
    },
    {
        id: 58,
        user: { first_name: "George", last_name: "Clark" },
        date: "2016/04/28 03:15:05",
        gender: "Male",
    },
    {
        id: 59,
        user: { first_name: "Frank", last_name: "Porter" },
        date: "2016/09/08 00:48:14",
        gender: "Male",
    },
    {
        id: 60,
        user: { first_name: "Christopher", last_name: "Palmer" },
        date: "2016/05/24 08:58:12",
        gender: "Male",
    },
];

const keepFirst = ref(false);
const openOnFocus = ref(false);

const name = ref("");
const selected = ref(null);

const filteredDataObj = computed(() =>
    data.filter(
        (option) =>
            option.user.first_name
                .toString()
                .toLowerCase()
                .indexOf(name.value.toLowerCase()) >= 0,
    ),
);

scss

css

Groups

Find a food

Selected:

Show code

Infinite Scroll

Find a movie

Selected:

Show code

HTMLJSSCSS

html

<section>
    <o-field label="Find a movie">
        <o-autocomplete
            :data="data"
            placeholder="e.g. Fight Club"
            field="title"
            :loading="isFetching"
            check-infinite-scroll
            :debounce-typing="500"
            @typing="getAsyncData"
            @select="(option) => (selected = option)"
            @infinite-scroll="getMoreAsyncData">
            <template #default="props">
                <div class="media">
                    <div class="media-left">
                        <img
                            width="32"
                            :src="`https://image.tmdb.org/t/p/w500/${props.option.poster_path}`" />
                    </div>
                    <div class="media-content">
                        {{ props.option.title }}
                        <br />
                        <small>
                            Released at {{ props.option.release_date }},
                            rated
                            <b>{{ props.option.vote_average }}</b>
                        </small>
                    </div>
                </div>
            </template>
            <template v-if="page > totalPages" #footer>
                <span class="ex-text-grey">
                    Thats it! No more movies found.
                </span>
            </template>
        </o-autocomplete>
    </o-field>
    <p><b>Selected:</b> {{ selected }}</p>
</section>

html

import { ref } from "vue";

const isFetching = ref(false);
const page = ref(1);
const totalPages = ref(1);

const data = ref([]);
const selected = ref(null);
const name = ref("");

async function getAsyncData(_name) {
    if (name.value !== _name) {
        name.value = _name;
        data.value = [];
        page.value = 1;
        totalPages.value = 1;
    }

    // String cleared
    if (!_name.length) {
        data.value = [];
        page.value = 1;
        totalPages.value = 1;
        return;
    }

    // Reached last page
    if (page.value > totalPages.value) {
        return;
    }

    isFetching.value = true;
    try {
        const _data = await fetch(
            `https://api.themoviedb.org/3/search/movie?api_key=bb6f51bef07465653c3e553d6ab161a8&query=${_name}&page=${page.value}`,
        ).then((response) => response.json());

        data.value = [...data.value, ..._data.results];
        page.value += 1;
        totalPages.value = _data.total_pages;
    } finally {
        isFetching.value = false;
    }
}

function getMoreAsyncData() {
    getAsyncData(name.value);
}

scss

.ex-text-grey {
    color: grey;
}

Class props

How does the Class props inspector work?

Class prop	Description	Props	Suffixes
expandedClass	Class of the autocomplete menu expanded.	`expanded`
inputClasses	Classes to apply on internal input. More detail here
itemClass	Class of the menu items.
itemEmptyClass	Class of the menu empty placeholder item.
itemFooterClass	Class of the menu footer item.
itemGroupTitleClass	Class of the menu items group title.
itemHeaderClass	Class of the menu header item.
itemHoverClass	Class of the menu items on hover.
menuClass	Class of the autocomplete menu.
menuPositionClass	Class of the autocomplete menu position.	`menu-position`	`auto top bottom`
rootClass	Class of the root element.

Autocomplete component

html

<o-autocomplete></o-autocomplete>

Props

Prop name	Description	Type	Values	Default
animation	Transition name to apply on dropdown list	string	-	From config: `autocomplete: { animation: 'fade' }`
appendToBody	Append autocomplete content to body	boolean	-
autocomplete	Native options to use in HTML5 validation	string	-
checkInfiniteScroll	Makes the component check if list reached scroll end and emit infinite-scroll event.	boolean	-
clearIcon	Icon name to be added on the clear button	string	-	From config: `autocomplete: { clearIcon: 'close-circle' }`
clearOnSelect	Clear input text on select	boolean	-
clearable	Add a button/icon to clear the inputed text	boolean	-
confirmKeys	Array of keys (https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/key/Key_Values) which will add a tag when typing (default tab and enter)	array	-	['Tab', 'Enter']
customFormatter	Function to format an option to a string for display in the input as alternative to field prop)	func	-
data	Options / suggestions	array	-	[]
debounceTyping	Number of milliseconds to delay before to emit typing event	number	-
expanded	Makes input full width when inside a grouped or addon field	boolean	-
field	Property of the object (if data is array of objects) to use as display text, and to keep track of selected option	string	-	'value'
groupField	Property of the object (if <code>data</code> is array of objects) to use as display text of group	string	-
groupOptions	Property of the object (if <code>data</code> is array of objects) to use as key to get items array of each group, optional	string	-
icon	Icon name to be added	string	-
iconPack	Icon pack to use	string	`mdi`, `fa`, `fas and any other custom icon pack`
iconRight	Icon name to be added on the right side	string	-
iconRightClickable	Clickable icon right if exists	boolean	-
itemTag	Menu item tag name	string \| Component	-	From config: `autocomplete: { itemTag: 'div' }`
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-
keepOpen	Keep open dropdown list after select	boolean	-
maxHeight	Max height of dropdown content	string\|number	-
maxlength	Same as native maxlength, plus character counter	number\|string	-
menuPosition	Position of dropdown	string	`auto`, `top`, `bottom`	'auto'
menuTag	Menu tag name	string \| Component	-	From config: `autocomplete: { menuTag: 'div' }`
openOnFocus	Open dropdown list on focus	boolean	-
override		boolean	-
rounded	Makes the element rounded	boolean	-
selectOnClickOutside	Trigger the select event for the first pre-selected option when clicking outside and <code>keep-first</code> is enabled	boolean	-
selectableFooter	Allows the footer in the autocomplete to be selectable	boolean	-
selectableHeader	Allows the header in the autocomplete to be selectable	boolean	-
size	Vertical size of input, optional	string	`small`, `medium`, `large`
statusIcon	Show status icon using field and variant prop	boolean	-	From config: `{ "statusIcon": true }`
type	Input type	string	-	'text'
useHtml5Validation	Enable html 5 native validation	boolean	-	From config: `{ "useHtml5Validation": true }`
v-model		number\|string	-
validationMessage	The message which is shown when a validation error occurs	string	-

Events

Event name	Properties	Description
icon-click
blur
focus
invalid
update:modelValue
select	selected `Object` - selected option event `Event` - native event
select-header
select-footer
infinite-scroll
typing
icon-right-click

Slots

Name	Description	Bindings
header
group
default
empty
footer

Sass variables

Current theme ➜ Oruga Base

SASS Variable	Default
$autocomplete-item-color	#000000
$autocomplete-item-disabled-opacity	$base-disabled-opacity
$autocomplete-item-font-size	$base-font-size
$autocomplete-item-hover-background-color	#f5f5f5
$autocomplete-item-hover-color	#000000
$autocomplete-item-line-height	$base-line-height
$autocomplete-item-padding	0.375rem 1rem
$autocomplete-menu-background	#ffffff
$autocomplete-menu-border-radius	$base-border-radius
$autocomplete-menu-box-shadow	0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$autocomplete-menu-margin	0
$autocomplete-menu-max-height	200px
$autocomplete-menu-padding	0.5rem 0 0.5rem 0
$autocomplete-menu-zindex	20

See ➜ 📄 Full scss file

Current theme ➜ Oruga Full

SASS Variable	Default
$autocomplete-item-color	#000000
$autocomplete-item-disabled-opacity	$base-disabled-opacity
$autocomplete-item-font-size	$base-font-size
$autocomplete-item-hover-background-color	#f5f5f5
$autocomplete-item-hover-color	#000000
$autocomplete-item-line-height	$base-line-height
$autocomplete-item-padding	0.375rem 1rem
$autocomplete-menu-background	#ffffff
$autocomplete-menu-border-radius	$base-border-radius
$autocomplete-menu-box-shadow	0 0.5em 1em -0.125em rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.02)
$autocomplete-menu-margin	0
$autocomplete-menu-max-height	200px
$autocomplete-menu-padding	0.5rem 0 0.5rem 0
$autocomplete-menu-zindex	20

See ➜ 📄 Full scss file

Current theme ➜ Bulma

The theme does not have any custom variables for this component.

Current theme ➜ Bootstrap

SASS Variable	Default
$autocomplete-menu-max-height	200px

See ➜ 📄 Full scss file

Autocomplete ​

Examples ​

Base

Objects array

Groups

Infinite Scroll

Class props ​

Class prop

Description

Props

Suffixes

Autocomplete component ​

Props ​

Events ​

Slots ​

Sass variables ​

Autocomplete

Examples

Class props

Autocomplete component

Props

Events

Slots

Sass variables