Home
Anonymous
Multi-Select Dropdown Filter with search

Multi-Select Dropdown Filter with search

Forked from> @anonymous/multi-select-dropdown-filter-with-search-2

Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

This tailwind example is contributed by Anonymous, on 10-Mar-2025. Component is made with Tailwind CSS v3. It is responsive.

Select Dropdown Tag Cloud

Author Anonymous

951

Fork Fullscreen

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Checkboxes with Filters</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
</head>
<body class="bg-gray-200">
    <div class="min-h-screen p-4 md:p-8">
        <form method="get" action="" class="max-w-6xl mx-auto" x-data="{
            dropdowns: [
                {
                    name: 'country',
                    label: 'Country',
                    items: [
                        { value: 'usa', label: 'USA' },
                        { value: 'china', label: 'China' },
                        { value: 'japan', label: 'Japan' },
                        { value: 'germany', label: 'Germany' },
                        { value: 'uk', label: 'United Kingdom' },
                        { value: 'india', label: 'India' },
                        { value: 'france', label: 'France' },
                        { value: 'italy', label: 'Italy' },
                        { value: 'canada', label: 'Canada' },
                        { value: 'brazil', label: 'Brazil' }
                    ]
                },
                {
                    name: 'brand',
                    label: 'Brand',
                    items: [
                        { value: 'moetchandon', label: 'Moët & Chandon' },
                        { value: 'domperignon', label: 'Dom Pérignon' },
                        { value: 'veuveclicquot', label: 'Veuve Clicquot' },
                        { value: 'crystalroederer', label: 'Louis Roederer Cristal' },
                        { value: 'kruger', label: 'Krug' },
                        { value: 'bollinger', label: 'Bollinger' },
                        { value: 'taittinger', label: 'Taittinger' },
                        { value: 'perrierjouet', label: 'Perrier-Jouët' },
                        { value: 'lafite', label: 'Château Lafite Rothschild' },
                        { value: 'latour', label: 'Château Latour' },
                        { value: 'margaux', label: 'Château Margaux' },
                        { value: 'petrus', label: 'Château Pétrus' },
                        { value: 'romanee', label: 'Domaine de la Romanée-Conti' }
                    ]
                },
                {
                    name: 'abv',
                    label: 'ABV',
                    items: [
                        { value: '0-20', label: '0-20%' },
                        { value: '20-40', label: '20-40%' },
                        { value: '40-99', label: '%40+' }
                    ]
                }
            ],
            getUrlParams(name) {
                const params = new URLSearchParams(window.location.search);
                const values = params.getAll(name + '[]');
                return values.length > 0 ? values : [];
            },
            getSelectedItems(dropdown) {
                return this.$refs[dropdown.name] 
                    ? dropdown.items.filter(item => this.$refs[dropdown.name].selected.includes(item.value))
                    : [];
            }
        }">
            
            <div class="flex flex-wrap items-start gap-2 mb-4">
                <template x-for="dropdown in dropdowns" :key="dropdown.name">
                    <div x-data="{
                            open: false,
                            search: '',
                            selected: getUrlParams(dropdown.name),
                            get filteredItems() {
                                return dropdown.items.filter(item =>
                                    item.label.toLowerCase().includes(this.search.toLowerCase())
                                )
                            },
                            get selectedLabel() {
                                if (this.selected.length === 0) return dropdown.label;
                                return `${dropdown.label}: ${this.selected.length}`;
                            }
                        }" 
                        class="relative w-full md:w-auto"
                        :x-ref="dropdown.name">
                        
                        <template x-for="value in selected" :key="value">
                            <input type="hidden" :name="dropdown.name + '[]'" :value="value" aria-label="dropdown">
                        </template>

<button type="button"
                                @click="open = !open; $nextTick(() => { if(open) $refs.searchInput.focus() })"
                                class="inline-flex justify-between w-full bg-white rounded md:w-48 px-2 py-2 text-base text-stone-500 bg-gray-50 border border-stone-300 appearance-none focus:outline-none ring-0 focus:ring-2 focus:ring-rose-200 focus:border-rose-500 peer">
                            <span x-text="selectedLabel" class="truncate mx-2"></span>
                            <svg xmlns="http://www.w3.org/2000/svg" class="w-5 h-5 flex-shrink-0" viewBox="0 0 20 20" fill="currentColor">
                                <path fill-rule="evenodd" d="M6.293 9.293a1 1 0 011.414 0L10 11.586l2.293-2.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" />
                            </svg>
                        </button>

<div x-show="open"
                             @click.away="open = false"
                             class="absolute z-10 w-full mt-2 rounded bg-white ring-2 ring-rose-200 border border-rose-500"
                             style="display: none;">
                            
                            <div class="relative">
                                <input x-model="search"
                                       x-ref="searchInput"
                                       @focus="$el.select()"
                                       class="block w-full px-4 py-2 text-gray-800 rounded-t border-b focus:outline-none"
                                       type="text"
                                       aria-label="dropdown.label.toLowerCase()"
                                       :placeholder="'Search for a ' + dropdown.label.toLowerCase()"
                                       @click.stop>
                                
                                <button type="button"
                                        @click="search = ''"
                                        class="absolute inset-y-0 right-2 px-2 flex items-center"
                                        x-show="search.length > 0">
                                    <svg class="h-4 w-4 text-gray-400 hover:text-rose-600" fill="currentColor" viewBox="0 0 20 20">
                                        <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                    </svg>
                                </button>
                            </div>

<div class="rounded-b max-h-60 overflow-y-auto [&::-webkit-scrollbar]:w-2 [&::-webkit-scrollbar-track]:bg-rose-100 [&::-webkit-scrollbar-thumb]:bg-rose-300">
                                <template x-for="item in filteredItems" :key="item.value">
                                    <div @click="selected.includes(item.value) ? selected = selected.filter(i => i !== item.value) : selected.push(item.value)"
                                         class="block px-4 py-2 text-gray-700 hover:bg-rose-200 hover:text-rose-500 cursor-pointer bg-white w-full"
                                         :class="{ 'bg-rose-200': selected.includes(item.value) }">
                                        <div class="flex items-center gap-2">
                                            <input type="checkbox"
                                                   :checked="selected.includes(item.value)"
                                                   aria-label="{item.label}"
                                                   class="w-4 h-4 border-gray-300 rounded focus:ring-blue-500 flex-shrink-0"
                                                   @click.stop>
                                            <span x-text="item.label" class="truncate"></span>
                                        </div>
                                    </div>
                                </template>
                            </div>
                        </div>
                    </div>
                </template>

<button type="submit"
                        class="w-full md:w-auto inline-flex justify-center font-medium appearance-none border border-rose-700 bg-rose-700 rounded px-8 py-2 text-base text-white hover:bg-rose-800 ring-0 peer">
                    Apply Filters
                </button>
            </div>

<div class="mb-6">
                <div class="flex flex-wrap gap-2">
                    <template x-for="dropdown in dropdowns" :key="dropdown.name">
                        <template x-if="$refs[dropdown.name] !== undefined">
                            <template x-for="item in getSelectedItems(dropdown)" :key="item.value">
                                <span class="inline-flex items-center px-3 py-1 rounded-full text-base bg-rose-100 text-rose-800">
                                    <span x-text="item.label"></span>
                                    <button type="button"
                                            @click="$refs[dropdown.name].selected = $refs[dropdown.name].selected.filter(i => i !== item.value); $refs[dropdown.name].$el.dispatchEvent(new Event('input'))"
                                            class="ml-2 inline-flex items-center p-0.5 hover:bg-blue-200 rounded-full">
                                        <svg class="h-3 w-3" fill="currentColor" viewBox="0 0 20 20">
                                            <path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" />
                                        </svg>
                                    </button>
                                </span>
                            </template>
                        </template>
                    </template>
                </div>
            </div>
        </form>
    </div>
</body>
</html>

Related Examples

Dropdown select on hover
this example does not uses javascript

Author:
Alok

2 years ago

29.2k
Drop Down
This component is a Select Input Or Dropdown UI & Dark mode Supported Component

Author:
Shariar Hasan

1 year ago

5.6k
Dropdown select on hover
this example does not uses javascript

Author:
Thomas Taylor

1 year ago

2.1k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Maxim

9 months ago

4k
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
Anonymous

6 months ago

1.4k
User List
List of users

Author:
Marcos Vinicios Nussemeyer

5 months ago

914
Multi-Select Dropdown Filter with search
Interactive filtering component built with Alpine.js and Tailwind CSS, featuring searchable multi-select dropdowns with dynamic URL parameters. The system includes responsive design, real-time search functionality, and visual feedback through selected item tags that can be easily removed.

Author:
SANJAY SINGH GARIYA

3 months ago

429
Nested dropdown
Nested dropdown without using javascript. It uses details and summary HTML tags for interactivity.

Author:
Emrys11

2 years ago

14.3k
Responsive Navbar with TailwindCSS
responsive navbar built with TailwindCSS, perfect for mobile and desktop views

Author:
Rathanak Phan

8 months ago

1.5k
Dropdown menu list
Dropdown menu list without using javascript. This example takes advantage of native HTML's <details> and <summary> tags

Author:
Prajwal Hallale

2 years ago

20k
Acode master
Welcome to Hamza's official portfolio — a creative developer blending modern design with powerful code. Explore animations, projects, and innovations crafted with HTML, Tailwind CSS, and passion.

Author:
Code Master(Mfuranziza Dusabe Hamza)

4 months ago

361
Expandable File Tree with Tailwind and Vanilla JS with tailwinds 4
A simple and responsive file tree component built with Tailwind CSS and vanilla JavaScript. Each folder can be expanded or collapsed with smooth transitions, including the root directory. This component is useful for project explorers, code editors, or file management UIs.

Author:
Indra

1 month ago

69

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components