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 v3.4. It is responsive.

Select Dropdown Tag Cloud

Author Anonymous

Tailwind v3.4 1.7k 2

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

Alok

3 years ago

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

Shariar Hasan

2 years ago

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

Thomas Taylor

2 years ago

3.2k
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.

Maxim

1 year ago

6.9k
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.

Anonymous

1 year ago

2.4k
User List
List of users

Marcos Vinicios Nussemeyer

1 year ago

1.9k
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.

SANJAY SINGH GARIYA

1 year ago

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

Rathanak Phan

1 year ago

2.2k
Pricing Plan Selector
radio buttons for selecting a pricing plan

Rafferty Kim

2 years ago

10.9k
Tag Input field
This code creates a dynamic tag input field using HTML, JavaScript, and TailwindCSS. Users can type tags into the input field and press "Enter" to add them. Each tag is displayed inside the input field as a styled container with a remove button. The tag input is limited to a maximum of 5 tags, and an error message is shown if the limit is exceeded. Users can remove tags to free up space for new ones. The input field and tags are styled using TailwindCSS, ensuring a clean and responsive design.

Ranit Saha

1 year ago

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

Emrys11

3 years ago

15.7k
Onhover Dropdown
Open dropdown on hover

Akshay

4 years ago

19.1k