Has on example for select large options

[Liripo]

I have 20,000 options and need to support drop-down and search. There are relevant sample codes？

[dilkhush-raj]

I don't know exactly how to implement but you can use some kind of virtual scroller. Specially for Vue you can check this out - https://github.com/Akryum/vue-virtual-scroller

[Liripo]

Through AI, I made an example and successfully used it in my project.

<script setup lang="ts">
import { cn } from '@/lib/utils' // Assuming utility function for class names
import { Button } from '@/components/ui/button' // Assuming Button component from UI library
import { Combobox, ComboboxAnchor, ComboboxEmpty, ComboboxGroup, ComboboxInput, ComboboxItem, ComboboxItemIndicator, ComboboxList, ComboboxTrigger } from '@/components/ui/combobox' // Assuming Combobox components
import { Check, ChevronsUpDown, Search } from 'lucide-vue-next' // Icons
import { ref, computed } from 'vue'
// @ts-ignore ignore type checking because vue-virtual-scroller doesn't have type definition files
import { RecycleScroller } from 'vue-virtual-scroller'
import 'vue-virtual-scroller/dist/vue-virtual-scroller.css'

// Simulate data for 20,000 options
const frameworks = Array.from({ length: 20000 }, (_, i) => ({
  id: `item-${i}`,
  label: `Option ${i + 1}` // Changed label to English
}))

const value = ref<{ id: string; label: string } | undefined>() // Added type hint for clarity
const searchQuery = ref('')

// Filter options based on search query
const filteredFrameworks = computed(() => {
  if (!searchQuery.value) return frameworks
  return frameworks.filter(item =>
    item.label.toLowerCase().includes(searchQuery.value.toLowerCase())
  )
})
</script>

<template>
  <Combobox v-model="value" by="label">
    <ComboboxAnchor as-child>
      <ComboboxTrigger as-child>
        <Button variant="outline" class="justify-between w-[180px]"> {{ value?.label ?? 'Select item...' }} <ChevronsUpDown class="ml-2 h-4 w-4 shrink-0 opacity-50" />
        </Button>
      </ComboboxTrigger>
    </ComboboxAnchor>

    <ComboboxList class="max-h-[300px] p-0"> <div class="p-2 border-b"> <div class="relative w-full items-center">
            <ComboboxInput
              v-model="searchQuery"
              class="pl-9 focus-visible:ring-0 border-0 h-9 w-full"  placeholder="Filter items..."   />
            <span class="absolute start-0 inset-y-0 flex items-center justify-center px-3">
              <Search class="size-4 text-muted-foreground" />
            </span>
         </div>
      </div>

      <ComboboxEmpty class="py-6 text-center text-sm"> No item found. </ComboboxEmpty>

      <ComboboxGroup>
         <RecycleScroller
            class="scroller"
            :items="filteredFrameworks"
            :item-size="32"  // Height of each ComboboxItem
            key-field="id"
            v-slot="{ item }"
            style="height: 200px;" >
            <ComboboxItem
              :key="item.id"
              :value="item"
              class="h-[32px]" >
              {{ item.label }} <ComboboxItemIndicator>
                <Check :class="cn('ml-auto h-4 w-4')" />
              </ComboboxItemIndicator>
            </ComboboxItem>
          </RecycleScroller>
      </ComboboxGroup>
    </ComboboxList>
  </Combobox>
</template>

<style scoped>
/* Removed .virtual-scroller-container as it's no longer needed */

.scroller {
  /* height: 100%; */ /* Height is now controlled by inline style or parent */
  width: 100%;
  overflow-y: auto; /* Ensure vertical scrollbar appears */
}

/* Style the scrollbar */
.scroller::-webkit-scrollbar {
  width: 6px;
}

.scroller::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.scroller::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.scroller::-webkit-scrollbar-thumb:hover {
  background: #a8a8a8;
}

/* You might want animations provided by your Combobox library (e.g., Radix/shadcn) */
/* Removed custom animations if the library provides them */
/*
.combobox-list-enter-active,
.combobox-list-leave-active {
  transition: opacity 0.2s, transform 0.2s;
}

.combobox-list-enter-from,
.combobox-list-leave-to {
  opacity: 0;
  transform: translateY(-8px);
}
*/
</style>