Home
Anonymous
Multi-Select Dropdown Filter with search

Multi-Select Dropdown Filter with search

Forked from> @maximus/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.

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

1.2k

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"
                                       :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)"
                                                   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

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

Author:
Shariar Hasan

1 year ago

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

Author:
Thomas Taylor

1 year ago

1.8k
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

7 months ago

3.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

4 months ago

729
User List
List of users

Author:
Marcos Vinicios Nussemeyer

3 months ago

696
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

1 month ago

252
Tag links component

Author:
Arya

2 years ago

8.7k
Tag/Button Cloud
Responsive tag cloud. Made with Flex-Box

Author:
TailwindFlex

2 years ago

11.5k
register
helps us to be learn easy

Author:
Nishimwe Jeanine

2 months ago

230
Dropdown profile
Using DaisyUI Based on: https://tailwindcomponents.com/component/dropdown-7

Author:
Dmitry

1 year ago

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

Author:
Ranit Saha

6 months ago

1.1k

Explore components by Tags

Didn't find component you were looking for?

Search from 2400+ components