Combobox (Autocomplete)

Basic combobox

BCombobox kinda works like an ordinary select but with autocomplete functionality https://github.com/tailwindlabs/headlessui/issues/2528

Select an encoding preset

Selected value:

#001

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

const options = [
  { description: 'H.264 low quality', value: '#001' },
  { description: 'H.264 balanced', value: '#002' },
  { description: 'H.264 high quality', value: '#003' },
  { description: 'MPEG2 balanced', value: '#004' },
  { description: 'MPEG2 high quality', value: '#005' },
]
const selected = ref(options[0].value)
</script>

<template>
  <BCombobox
    v-slot="{ filtered }"
    v-model="selected"
    mark-on-focus
    :options
    label="Select an encoding preset"
  >
    <BComboboxOption
      v-for="option in filtered"
      :key="option.value"
      :value="option.value"
    >
      {{ option.description }}
    </BComboboxOption>
  </BCombobox>

  <div class="flex items-baseline">
    <p class="text-lg font-semibold mt-4 mr-4">
      Selected value:
    </p>
    <pre>{{ selected }}</pre>
  </div>
</template>