Search Filter

Live-Suche und Filterung einer Produktliste.

Component HTML

<div class="max-w-4xl mx-auto">
  <h2 class="text-2xl font-bold text-gray-900 mb-6">{{title}}</h2>

  <div
    data-island="search-filter"
    data-island-props='{"items": {{items}}}'
  >
    <!-- Search Filter Island rendert hier -->
  </div>
</div>

Island Code

// islands/search-filter.js
export default class SearchFilterIsland {
  constructor(element, props = {}) {
    this.element = element;
    this.items = props.items || [];
    this.searchTerm = '';
    this.selectedCategory = 'all';
    this.init();
  }

  init() {
    this.render();
    this.attachEvents();
  }

  get filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
      const matchesCategory = this.selectedCategory === 'all' || item.category === this.selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }

  get categories() {
    return ['all', ...new Set(this.items.map(item => item.category))];
  }

  render() {
    const filtered = this.filteredItems;

    this.element.innerHTML = `
      <div class="mb-6 flex gap-4">
        <input
          type="text"
          placeholder="Suche..."
          class="search-input flex-1 px-4 py-2 border border-gray-300 rounded-lg"
          value="${this.searchTerm}"
        />
        <select class="category-select px-4 py-2 border border-gray-300 rounded-lg">
          ${this.categories.map(cat => `
            <option value="${cat}" ${cat === this.selectedCategory ? 'selected' : ''}>
              ${cat === 'all' ? 'Alle Kategorien' : cat}
            </option>
          `).join('')}
        </select>
      </div>

      <div class="text-sm text-gray-600 mb-4">
        ${filtered.length} von ${this.items.length} Produkten
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        ${filtered.map(item => `
          <div class="p-4 bg-white border border-gray-200 rounded-lg">
            <h3 class="font-semibold text-gray-900">${item.name}</h3>
            <p class="text-sm text-gray-600">${item.category}</p>
            <p class="text-lg font-bold text-blue-600 mt-2">${item.price}</p>
          </div>
        `).join('')}
      </div>

      ${filtered.length === 0 ? '<p class="text-center text-gray-500 mt-8">Keine Produkte gefunden</p>' : ''}
    `;
  }

  attachEvents() {
    this.element.querySelector('.search-input').addEventListener('input', (e) => {
      this.searchTerm = e.target.value;
      this.render();
      this.attachEvents();
    });

    this.element.querySelector('.category-select').addEventListener('change', (e) => {
      this.selectedCategory = e.target.value;
      this.render();
      this.attachEvents();
    });
  }

  destroy() {
    // Cleanup
  }
}

<!-- islands/search-filter.svelte -->
<script>
  let { items = [] } = $props();

  let searchTerm = $state('');
  let selectedCategory = $state('all');

  let categories = $derived(['all', ...new Set(items.map(item => item.category))]);

  let filteredItems = $derived(
    items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
      return matchesSearch && matchesCategory;
    })
  );
</script>

<div>
  <div class="mb-6 flex gap-4">
    <input
      type="text"
      placeholder="Suche..."
      bind:value={searchTerm}
      class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
    />
    <select bind:value={selectedCategory} class="px-4 py-2 border border-gray-300 rounded-lg">
      {#each categories as cat}
        <option value={cat}>
          {cat === 'all' ? 'Alle Kategorien' : cat}
        </option>
      {/each}
    </select>
  </div>

  <div class="text-sm text-gray-600 mb-4">
    {filteredItems.length} von {items.length} Produkten
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
    {#each filteredItems as item}
      <div class="p-4 bg-white border border-gray-200 rounded-lg">
        <h3 class="font-semibold text-gray-900">{item.name}</h3>
        <p class="text-sm text-gray-600">{item.category}</p>
        <p class="text-lg font-bold text-blue-600 mt-2">{item.price}</p>
      </div>
    {/each}
  </div>

  {#if filteredItems.length === 0}
    <p class="text-center text-gray-500 mt-8">Keine Produkte gefunden</p>
  {/if}
</div>

// islands/search-filter.jsx
import React, { useState, useMemo } from 'react';
import { createRoot } from 'react-dom/client';

function SearchFilterComponent({ items = [] }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');

  const categories = useMemo(() =>
    ['all', ...new Set(items.map(item => item.category))],
    [items]
  );

  const filteredItems = useMemo(() =>
    items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
      return matchesSearch && matchesCategory;
    }),
    [items, searchTerm, selectedCategory]
  );

  return (
    <div>
      <div className="mb-6 flex gap-4">
        <input
          type="text"
          placeholder="Suche..."
          value={searchTerm}
          onChange={(e) => setSearchTerm(e.target.value)}
          className="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
        />
        <select
          value={selectedCategory}
          onChange={(e) => setSelectedCategory(e.target.value)}
          className="px-4 py-2 border border-gray-300 rounded-lg"
        >
          {categories.map(cat => (
            <option key={cat} value={cat}>
              {cat === 'all' ? 'Alle Kategorien' : cat}
            </option>
          ))}
        </select>
      </div>

      <div className="text-sm text-gray-600 mb-4">
        {filteredItems.length} von {items.length} Produkten
      </div>

      <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredItems.map((item, i) => (
          <div key={i} className="p-4 bg-white border border-gray-200 rounded-lg">
            <h3 className="font-semibold text-gray-900">{item.name}</h3>
            <p className="text-sm text-gray-600">{item.category}</p>
            <p className="text-lg font-bold text-blue-600 mt-2">{item.price}</p>
          </div>
        ))}
      </div>

      {filteredItems.length === 0 && (
        <p className="text-center text-gray-500 mt-8">Keine Produkte gefunden</p>
      )}
    </div>
  );
}

export default class SearchFilterIsland {
  constructor(element, props = {}) {
    this.root = createRoot(element);
    this.root.render(<SearchFilterComponent {...props} />);
  }

  destroy() {
    this.root?.unmount();
  }
}

// islands/search-filter.jsx
import { h } from 'preact';
import { useState, useMemo } from 'preact/hooks';
import { render } from 'preact';

function SearchFilterComponent({ items = [] }) {
  const [searchTerm, setSearchTerm] = useState('');
  const [selectedCategory, setSelectedCategory] = useState('all');

  const categories = useMemo(() =>
    ['all', ...new Set(items.map(item => item.category))],
    [items]
  );

  const filteredItems = useMemo(() =>
    items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(searchTerm.toLowerCase());
      const matchesCategory = selectedCategory === 'all' || item.category === selectedCategory;
      return matchesSearch && matchesCategory;
    }),
    [items, searchTerm, selectedCategory]
  );

  return (
    <div>
      <div class="mb-6 flex gap-4">
        <input
          type="text"
          placeholder="Suche..."
          value={searchTerm}
          onInput={(e) => setSearchTerm(e.target.value)}
          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
        />
        <select
          value={selectedCategory}
          onChange={(e) => setSelectedCategory(e.target.value)}
          class="px-4 py-2 border border-gray-300 rounded-lg"
        >
          {categories.map(cat => (
            <option key={cat} value={cat}>
              {cat === 'all' ? 'Alle Kategorien' : cat}
            </option>
          ))}
        </select>
      </div>

      <div class="text-sm text-gray-600 mb-4">
        {filteredItems.length} von {items.length} Produkten
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        {filteredItems.map((item, i) => (
          <div key={i} class="p-4 bg-white border border-gray-200 rounded-lg">
            <h3 class="font-semibold text-gray-900">{item.name}</h3>
            <p class="text-sm text-gray-600">{item.category}</p>
            <p class="text-lg font-bold text-blue-600 mt-2">{item.price}</p>
          </div>
        ))}
      </div>

      {filteredItems.length === 0 && (
        <p class="text-center text-gray-500 mt-8">Keine Produkte gefunden</p>
      )}
    </div>
  );
}

export default class SearchFilterIsland {
  constructor(element, props = {}) {
    this.element = element;
    render(<SearchFilterComponent {...props} />, element);
  }

  destroy() {
    render(null, this.element);
  }
}

// islands/search-filter.js
import { createApp } from 'vue';

const SearchFilterComponent = {
  props: {
    items: Array
  },
  data() {
    return {
      searchTerm: '',
      selectedCategory: 'all'
    };
  },
  computed: {
    categories() {
      return ['all', ...new Set(this.items.map(item => item.category))];
    },
    filteredItems() {
      return this.items.filter(item => {
        const matchesSearch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
        const matchesCategory = this.selectedCategory === 'all' || item.category === this.selectedCategory;
        return matchesSearch && matchesCategory;
      });
    }
  },
  template: `
    <div>
      <div class="mb-6 flex gap-4">
        <input
          type="text"
          placeholder="Suche..."
          v-model="searchTerm"
          class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
        />
        <select v-model="selectedCategory" class="px-4 py-2 border border-gray-300 rounded-lg">
          <option v-for="cat in categories" :key="cat" :value="cat">
            {{ cat === 'all' ? 'Alle Kategorien' : cat }}
          </option>
        </select>
      </div>

      <div class="text-sm text-gray-600 mb-4">
        {{ filteredItems.length }} von {{ items.length }} Produkten
      </div>

      <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
        <div v-for="(item, i) in filteredItems" :key="i" class="p-4 bg-white border border-gray-200 rounded-lg">
          <h3 class="font-semibold text-gray-900">{{ item.name }}</h3>
          <p class="text-sm text-gray-600">{{ item.category }}</p>
          <p class="text-lg font-bold text-blue-600 mt-2">{{ item.price }}</p>
        </div>
      </div>

      <p v-if="filteredItems.length === 0" class="text-center text-gray-500 mt-8">
        Keine Produkte gefunden
      </p>
    </div>
  `
};

export default class SearchFilterIsland {
  constructor(element, props = {}) {
    this.app = createApp(SearchFilterComponent, props);
    this.app.mount(element);
  }

  destroy() {
    this.app?.unmount();
  }
}

// islands/search-filter.js
import { LitElement, html, css } from 'lit';
import { customElement, property, state } from 'lit/decorators.js';

@customElement('search-filter-component')
class SearchFilterComponent extends LitElement {
  static styles = css`
    :host {
      display: block;
    }
  `;

  @property({ type: Array })
  items = [];

  @state()
  searchTerm = '';

  @state()
  selectedCategory = 'all';

  get categories() {
    return ['all', ...new Set(this.items.map(item => item.category))];
  }

  get filteredItems() {
    return this.items.filter(item => {
      const matchesSearch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
      const matchesCategory = this.selectedCategory === 'all' || item.category === this.selectedCategory;
      return matchesSearch && matchesCategory;
    });
  }

  handleSearchInput(e) {
    this.searchTerm = e.target.value;
  }

  handleCategoryChange(e) {
    this.selectedCategory = e.target.value;
  }

  render() {
    const filtered = this.filteredItems;

    return html`
      <div>
        <div class="mb-6 flex gap-4">
          <input
            type="text"
            placeholder="Suche..."
            .value=${this.searchTerm}
            @input=${this.handleSearchInput}
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
          />
          <select
            .value=${this.selectedCategory}
            @change=${this.handleCategoryChange}
            class="px-4 py-2 border border-gray-300 rounded-lg"
          >
            ${this.categories.map(cat => html`
              <option value="${cat}">
                ${cat === 'all' ? 'Alle Kategorien' : cat}
              </option>
            `)}
          </select>
        </div>

        <div class="text-sm text-gray-600 mb-4">
          ${filtered.length} von ${this.items.length} Produkten
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          ${filtered.map((item, i) => html`
            <div class="p-4 bg-white border border-gray-200 rounded-lg">
              <h3 class="font-semibold text-gray-900">${item.name}</h3>
              <p class="text-sm text-gray-600">${item.category}</p>
              <p class="text-lg font-bold text-blue-600 mt-2">${item.price}</p>
            </div>
          `)}
        </div>

        ${filtered.length === 0 ? html`
          <p class="text-center text-gray-500 mt-8">Keine Produkte gefunden</p>
        ` : ''}
      </div>
    `;
  }
}

export default class SearchFilterIsland {
  constructor(element, props = {}) {
    const component = document.createElement('search-filter-component');
    component.items = props.items || [];
    element.appendChild(component);
    this.element = element;
  }

  destroy() {
    this.element.innerHTML = '';
  }
}

// islands/search-filter.js
export default class SearchFilterIsland {
  constructor(element, props = {}) {
    const items = JSON.stringify(props.items || []);

    element.innerHTML = `
      <div
        x-data="{
          items: ${items},
          searchTerm: '',
          selectedCategory: 'all',

          get categories() {
            return ['all', ...new Set(this.items.map(item => item.category))];
          },

          get filteredItems() {
            return this.items.filter(item => {
              const matchesSearch = item.name.toLowerCase().includes(this.searchTerm.toLowerCase());
              const matchesCategory = this.selectedCategory === 'all' || item.category === this.selectedCategory;
              return matchesSearch && matchesCategory;
            });
          }
        }"
      >
        <div class="mb-6 flex gap-4">
          <input
            type="text"
            placeholder="Suche..."
            x-model="searchTerm"
            class="flex-1 px-4 py-2 border border-gray-300 rounded-lg"
          />
          <select
            x-model="selectedCategory"
            class="px-4 py-2 border border-gray-300 rounded-lg"
          >
            <template x-for="cat in categories" :key="cat">
              <option :value="cat" x-text="cat === 'all' ? 'Alle Kategorien' : cat"></option>
            </template>
          </select>
        </div>

        <div class="text-sm text-gray-600 mb-4">
          <span x-text="filteredItems.length"></span> von <span x-text="items.length"></span> Produkten
        </div>

        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
          <template x-for="(item, i) in filteredItems" :key="i">
            <div class="p-4 bg-white border border-gray-200 rounded-lg">
              <h3 class="font-semibold text-gray-900" x-text="item.name"></h3>
              <p class="text-sm text-gray-600" x-text="item.category"></p>
              <p class="text-lg font-bold text-blue-600 mt-2" x-text="item.price"></p>
            </div>
          </template>
        </div>

        <p x-show="filteredItems.length === 0" class="text-center text-gray-500 mt-8">
          Keine Produkte gefunden
        </p>
      </div>
    `;
  }

  destroy() {
    // Alpine cleanup happens automatically
  }
}

Was du lernst

• Live Search: Sofortige Filterung bei Eingabe
• Multiple Filters: Kombination von Such- und Kategorie-Filter
• Computed Values: Abgeleitete Werte (filteredItems, categories)
• Performance: useMemo/computed für optimierte Berechnungen