Autocomplete

Extended input that provide suggestions while the user types

Examples

Base

Show code

HTML

<section>
    <o-field label="Find a JS framework">
        <o-autocomplete
            v-model="selected"
            :options="options"
            rounded
            expanded
            placeholder="e.g. jQuery"
            icon="search"
            clearable
            open-on-focus>
            <template #empty>No results found</template>
        </o-autocomplete>
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const options = [
    "Angular",
    "Angular 2",
    "Aurelia",
    "Backbone",
    "Ember",
    "jQuery",
    "Meteor",
    "Node.js",
    "Polymer",
    "React",
    "RxJS",
    "Vue.js",
];

const selected = ref();

Objects array

Show code

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-switch v-model="keepOpen">KeepOpen</o-switch>
    </o-field>

    <o-field label="Find a name">
        <o-autocomplete
            v-model="selected"
            :options="options"
            placeholder="e.g. Anne"
            :keep-first="keepFirst"
            :open-on-focus="openOnFocus"
            :keep-open="keepOpen"
            field="user.first_name">
            <template #empty> No results found </template>
        </o-autocomplete>
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const options = [
    {
        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",
    },
];

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

const selected = ref(null);

Groups

Show code

HTML

<section>
    <o-field label="Find a food">
        <o-autocomplete
            v-model="selected"
            :input="'Apple'"
            :options="options"
            group-field="type"
            group-options="items"
            open-on-focus
            field="user.first_name"
            :filter="filter" />
    </o-field>

    <p><b>Selected:</b> {{ selected }}</p>
</section>

JS

import { ref } from "vue";

const options = [
    {
        type: "Fruit",
        items: ["Apple", "Banana", "Watermelon"],
    },
    {
        type: "Vegetables",
        items: ["Carrot", "Broccoli", "Cucumber", "Onion"],
    },
];

function filter(data: typeof options, value: string): typeof options {
    return data.reduce((acc, element) => {
        const items = element.items.filter(
            (item) => item.toLowerCase().indexOf(value.toLowerCase()) >= 0,
        );

        return items.length ? [...acc, { type: element.type, items }] : acc;
    }, []);
}

const selected = ref();

Infinite Scroll

Show code

HTML

<section>
    <o-field label="Find a movie">
        <o-autocomplete
            v-model="selected"
            :options="options"
            placeholder="e.g. Fight Club"
            field="title"
            expanded
            check-scroll
            open-on-focus
            :debounce="500"
            @input="getAsyncData"
            @scroll-end="getMoreAsyncData">
            <template #default="{ option }">
                <div class="media">
                    <div class="media-left">
                        <img
                            width="32"
                            :src="`https://image.tmdb.org/t/p/w500/${option.poster_path}`" />
                    </div>
                    <div class="media-content">
                        {{ option.title }}
                        <br />
                        <small>
                            Released at {{ option.release_date }}, rated
                            <b>{{ option.vote_average }}</b>
                        </small>
                    </div>
                </div>
            </template>

            <template v-if="page > totalPages || !options.length" #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>

JS

import { ref } from "vue";

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

const options = ref([]);
const selected = ref(null);
const value = ref("");

async function getAsyncData(_value): Promise<void> {
    if (value.value !== _value) {
        value.value = _value;
        options.value = [];
        page.value = 1;
        totalPages.value = 1;
    }

    // String cleared
    if (!_value.length) {
        options.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=${_value}&page=${page.value}`,
        ).then((response) => response.json());

        options.value = [...options.value, ..._data.results];
        page.value += 1;
        totalPages.value = _data.total_pages;
    } catch (err) {
        console.error(err);
    } finally {
        isFetching.value = false;
    }
}

function getMoreAsyncData(): void {
    getAsyncData(value.value);
}

SCSS

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

Class props

'Classes applied to the element'

Autocomplete component

Extended input that provide suggestions while the user types

<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" }
autocomplete	Native options to use in HTML5 validation	string	-	From config: autocomplete: {   autocomplete: "off" }
checkScroll	Makes the component check if list reached scroll start or end and emit scroll events.	boolean	-	From config: autocomplete: {   checkScroll: false }
clearIcon	Icon name to be added on the clear button	string	-	From config: autocomplete: {   clearIcon: "close-circle" }
clearOnSelect	Clear input text on select	boolean	-	From config: autocomplete: {   clearOnSelect: false }
clearable	Add a button/icon to clear the inputed text	boolean	-	From config: autocomplete: {   clearable: false }
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)	string[]	-	From config: autocomplete: {   confirmKeys: ["Tab","Enter"] }
customValidity	Custom HTML 5 validation error to set on the form control	| string | (( currentValue: T | null | undefined, state: ValidityState, ) => string)	-	""
debounce	Number of milliseconds to delay before to emit input event	number	-	From config: autocomplete: {   debounce: 400 }
disabled	Same as native input disabled	boolean	-	false
expanded	Makes input full width when inside a grouped or addon field	boolean	-	false
field	Property of the object (if options are an array of objects) to use as display text, and to keep track of selected option	string	-
filter	Function to filter the options based on the input value - default is display text comparison	(options: T[], value: string) => T[]	-
formatter	Function to format an option to a string for display it in the input (as alternative to field prop)	(value: unknown, option: T) => string	-
groupField	Property of the object (if options are an array of objects) to use as display text of group	string	-
groupOptions	Property of the object (if options are an array of objects) to use as key to get items array of each group	string	-
icon	Icon to be shown	string	-	From config: autocomplete: {   icon: undefined }
iconClickable	Makes the icon clickable	boolean	-	false
iconPack	Icon pack to use	string	mdi, fa, fas and any other custom icon pack	From config: autocomplete: {   iconPack: undefined }
iconRight	Icon to be added on the right side	string	-	From config: autocomplete: {   iconRight: undefined }
iconRightClickable	Make the icon right clickable	boolean	-	false
iconRightVariant	Variant of right icon	string	-
input	The value of the inner input, use v-model:input to make it two-way binding	string	-	""
itemTag	Menu item tag name	DynamicComponent	-	From config: autocomplete: {   itemTag: "div" }
keepFirst	The first option will always be pre-selected (easier to just hit enter or tab)	boolean	-	From config: autocomplete: {   keepFirst: false }
keepOpen	Keep open dropdown list after select	boolean	-	From config: autocomplete: {   keepOpen: false }
maxHeight	Max height of dropdown content	string|number	-	From config: autocomplete: {   maxHeight: undefined }
maxlength	Same as native maxlength, plus character counter	string|number	-
menuTag	Menu tag name	DynamicComponent	-	From config: autocomplete: {   menuTag: "div" }
mobileModal	Dropdown content (items) are shown into a modal on mobile	boolean	-	From config: autocomplete: {   mobileModal: false }
v-model	The selected option, use v-model to make it two-way binding	T	-
openOnFocus	Open dropdown list on focus	boolean	-	From config: autocomplete: {   openOnFocus: false }
options	Options / suggestions	string[]|object[]	-	Default function (see source code)
override	Override existing theme classes completely	boolean	-
placeholder	Input placeholder	string	-
position	Position of the dropdown	string	auto, top, bottom	From config: autocomplete: {   position: "auto" }
rounded	Makes the element rounded	boolean	-	false
selectOnClickOutside	Trigger the select event for the first pre-selected option when clicking outside and keep-first is enabled	boolean	-	false
selectableFooter	Allows the footer in the autocomplete to be selectable	boolean	-	false
selectableHeader	Allows the header in the autocomplete to be selectable	boolean	-	false
size	Size of the control	string	small, medium, large	From config: autocomplete: {   size: undefined }
statusIcon	Show status icon using field and variant prop	boolean	-	From config: {   statusIcon: true }
teleport	Append the component to another part of the DOM. Set true to append the component to the body. In addition, any CSS selector string or an actual DOM node can be used.	boolean|string|object	-	From config: autocomplete: {   teleport: false }
type	Input type	string	-	"text"
useHtml5Validation	Enable HTML 5 native validation	boolean	-	From config: {   useHtml5Validation: true }

Events

Event name	Properties	Description
icon-click	event Event - native event	on icon click event
update:modelValue	value string | object - updated modelValue prop	modelValue prop two-way binding
update:input	value string - updated input prop	input prop two-way binding
input	value string - input value	on input change event
select	value string | object - selected value	selected element changed event
select-header	event Event - native event	header is selected
select-footer	event Event - native event	footer is selected
focus	event Event - native event	on input focus event
blur	event Event - native event	on input blur event
invalid	event Event - native event	on input invalid event
icon-right-click	event Event - native event	on icon right click event
scroll-start		the list inside the dropdown reached the start
scroll-end		the list inside the dropdown reached it's end

Slots

Name	Description	Bindings
header	Define an additional header
group	Override the option grpup	group object - options group index number - option index
default	Override the select option	option object - option object value unknown - option value index number - option index
empty	Define content for empty state
footer	Define an additional footer

Sass variables

Current theme ➜ Oruga

SASS Variable	Default
$autocomplete-item-hover-background-color	#f5f5f5

See ➜ 📄 Full scss file

Current theme ➜ Bulma

SASS Variable	Default
$dropdown-content-max-height	200px

See ➜ 📄 Full scss file

Current theme ➜ Bootstrap

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

See ➜ 📄 Full scss file