35 lines
1.2 KiB
Vue
35 lines
1.2 KiB
Vue
<template>
|
|
<div>
|
|
<HeadlessCombobox v-model="selectedPerson">
|
|
<HeadlessComboboxInput class="w-full border-none py-2 pl-3 pr-10 text-sm leading-5 text-gray-900 focus:ring-0" @change="query = $event.target.value" />
|
|
<HeadlessComboboxOptions class="absolute mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm">
|
|
<HeadlessComboboxOption class="mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none sm:text-sm" v-for="person in filteredPeople" :key="person" :value="person">
|
|
{{ person }}
|
|
</HeadlessComboboxOption>
|
|
</HeadlessComboboxOptions>
|
|
</HeadlessCombobox>
|
|
<h1>Home Page</h1>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { ref, computed } from 'vue'
|
|
|
|
const people = [
|
|
'Wade Cooper',
|
|
'Arlene McCoy',
|
|
'Devon Webb',
|
|
'Tom Cook',
|
|
'Tanya Fox',
|
|
'Hellen Schmidt',
|
|
]
|
|
const selectedPerson = ref(people[0])
|
|
const query = ref('')
|
|
|
|
const filteredPeople = computed(() =>
|
|
query.value === ''
|
|
? people
|
|
: people.filter((person) => {
|
|
return person.toLowerCase().includes(query.value.toLowerCase())
|
|
})
|
|
)
|
|
</script> |