Autocomplete

You can get some recommended tips based on the current input.

Autocomplete component provides input suggestions. The fetch-suggestions attribute is a method that returns suggested input. In this example, querySearch(queryString, cb) returns suggestions to Autocomplete via cb(data) when suggestions are ready.

List suggestions when activated

List suggestions on input

---

<template>
  <b-row class="mt--4">
    <b-col :span="6">
      <b-form-item label="List suggestions when activated">
        <b-autocomplete
          v-model="state1"
          :fetch-suggestions="querySearch"
          clearable
          placeholder="Please Input"
          @select="handleSelect"
        />
      </b-form-item>
    </b-col>
    <b-col :span="6">
      <b-form-item label="List suggestions on input">
        <b-autocomplete
          v-model="state2"
          :fetch-suggestions="querySearch"
          :trigger-on-focus="false"
          clearable
          placeholder="Please Input"
          @select="handleSelect"
        />
      </b-form-item>
    </b-col>
  </b-row>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

interface RestaurantItem {
  value: string
  link: string
}

const state1 = ref('')
const state2 = ref('')

const restaurants = ref<RestaurantItem[]>([])
const querySearch = (queryString: string, cb: any) => {
  const results = queryString
    ? restaurants.value.filter(createFilter(queryString))
    : restaurants.value
  // call callback function to return suggestions
  cb(results)
}
const createFilter = (queryString: string) => {
  return (restaurant: RestaurantItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'nuxt', link: 'https://github.com/nuxtjs' },
    { value: 'axios', link: 'https://github.com/axios' },
    { value: 'bigin-ui', link: 'https://github.com/bigin-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

const handleSelect = (item: RestaurantItem) => {
  // eslint-disable-next-line no-console
  console.log(item)
}

onMounted(() => {
  restaurants.value = loadAll()
})
</script>

Custom template

Customize how suggestions are displayed.

Use scoped slot to customize suggestion items. In the scope, you can access the suggestion object via the item key.

---

<template>
  <b-autocomplete
    v-model="state"
    :fetch-suggestions="querySearch"
    placeholder="Please input"
    class="w-1/3"
    @select="handleSelect"
  >
    <template #suffix>
      <b-icon :size="16" @click="handleIconClick">
        <Edit />
      </b-icon>
    </template>
    <template #default="{ item }">
      <p class="text-md fw-600">{{ item.value }}</p>
      <p class="text-xs fw-400 b-c-neutral-6">{{ item.link }}</p>
    </template>
  </b-autocomplete>
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'
import { Edit } from '@bigin/icons-vue'

interface LinkItem {
  value: string
  link: string
}

const state = ref('')
const links = ref<LinkItem[]>([])

const querySearch = (queryString: string, cb) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value
  // call callback function to return suggestion objects
  cb(results)
}
const createFilter = (queryString) => {
  return (restaurant) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}
const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'nuxt', link: 'https://github.com/nuxtjs' },
    { value: 'axios', link: 'https://github.com/axios' },
    { value: 'bigin-ui', link: 'https://github.com/bigin-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}
const handleSelect = (item: LinkItem) => {
  // eslint-disable-next-line no-console
  console.log(item)
}

const handleIconClick = (ev: Event) => {
  // eslint-disable-next-line no-console
  console.log(ev)
}

onMounted(() => {
  links.value = loadAll()
})
</script>

Remote search

Search data from server-side.

---

<template>
  <b-autocomplete
    v-model="state"
    :fetch-suggestions="querySearchAsync"
    placeholder="Please input"
    class="w-1/3"
    @select="handleSelect"
  />
</template>

<script lang="ts" setup>
import { onMounted, ref } from 'vue'

const state = ref('')

interface LinkItem {
  value: string
  link: string
}

const links = ref<LinkItem[]>([])

const loadAll = () => {
  return [
    { value: 'vue', link: 'https://github.com/vuejs/vue' },
    { value: 'nuxt', link: 'https://github.com/nuxtjs' },
    { value: 'axios', link: 'https://github.com/axios' },
    { value: 'bigin-ui', link: 'https://github.com/bigin-ui' },
    { value: 'vuex', link: 'https://github.com/vuejs/vuex' },
    { value: 'vue-router', link: 'https://github.com/vuejs/vue-router' },
    { value: 'babel', link: 'https://github.com/babel/babel' },
  ]
}

let timeout: NodeJS.Timeout
const querySearchAsync = (
  queryString: string,
  cb: (data: LinkItem[]) => void
) => {
  const results = queryString
    ? links.value.filter(createFilter(queryString))
    : links.value

  clearTimeout(timeout)
  timeout = setTimeout(() => {
    cb(results)
  }, 3000 * Math.random())
}
const createFilter = (queryString: string) => {
  return (restaurant: LinkItem) => {
    return (
      restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0
    )
  }
}

const handleSelect = (item: LinkItem) => {
  // eslint-disable-next-line no-console
  console.log(item)
}

onMounted(() => {
  links.value = loadAll()
})
</script>

Autocomplete Attributes

Name	Description	Type	Accepted Values	Default
placeholder	the placeholder of Autocomplete	string	—	—
clearable	whether to show clear button	boolean	—	false
disabled	whether Autocomplete is disabled	boolean	—	false
value-key	key name of the input suggestion object for display	string	—	value
model-value / v-model	binding value	string	—	—
debounce	debounce delay when typing, in milliseconds	number	—	300
placement	placement of the popup menu	string	top / top-start / top-end / bottom / bottom-start / bottom-end	bottom-start
fetch-suggestions	a method to fetch input suggestions. When suggestions are ready, invoke callback(data:[]) to return them to Autocomplete	Function(queryString, callback)	—	—
popper-class	custom class name for autocomplete's dropdown	string	—	—
trigger-on-focus	whether show suggestions when input focus	boolean	—	true
name	same as name in native input	string	—	—
select-when-unmatched	whether to emit a select event on enter when there is no autocomplete match	boolean	—	false
label	label text	string	—	—
hide-loading	whether to hide the loading icon in remote search	boolean	—	false
popper-append-to-body(deprecated)	whether to append the dropdown to body. If the positioning of the dropdown is wrong, you can try to set this prop to false	boolean	—	false
teleported	whether select dropdown is teleported to the body	boolean	true / false	true
highlight-first-item	whether to highlight first item in remote search suggestions by default	boolean	—	false
fit-input-width	whether the width of the dropdown is the same as the input	boolean	—	false
input-style	the style of the input element or textarea element	object	-	{}
textarea-class	the custom CSS class for textarea element	string	-	-
prefix-class	the custom CSS class for prefix element	string	-	-
suffix-class	the custom CSS class for suffix element	string	-	-
prepend-class	the custom CSS class for prepend element	string	-	-
append-class	the custom CSS class for append element	string	-	-
rounded	rounded input	boolean	-	false
small	small input	boolean	-	false
large	large input	boolean	-	false

Autocomplete Slots

Name	Description
—	Custom content for input suggestions. The scope parameter is { item }
prefix	content as Input prefix
suffix	content as Input suffix
prepend	content to prepend before Input
append	content to append after Input

Autocomplete Events

Name	Description	Parameters
select	triggers when a suggestion is clicked	suggestion being clicked
change	triggers when the icon inside Input value change	(value: string | number)

Autocomplete Methods

Method	Description	Parameters
focus	focus the input element	—
blur	blur the input element	—