Minisuche mit Tom Select

In der 23. Contao Show zum Thema „Suche mit Contao“ habe ich eine Mini-Suche vorgestellt, um beispielsweise Leistungen oder Standorte zu durchsuchen. Falls du die Show nicht gesehen hast, kannst du sie dir hier ansehen:

Zur 23. Contao Show

Schritte zur Umsetzung

1. Dateidownload

Das Script kannst du direkt von der Website herunterladen: tom-select.js.org

Du hast dabei die Wahl zwischen einem Komplettpaket inkl. aller Plugins oder der Basis-Variante. Die Basis-Variante ist für dieses Beispiel ausreichend.

2. Frontend-Modul anlegen und einbinden

Für unsere Suche legen wir ein Frontend-Modul vom Typ Quick-Navigation an und binden es auf der Seite ein, auf der die Mini-Suche zu sehen sein soll. Als Referenzseite wählst du die entsprechende Oberseite aus, deren Unterseiten in der Suche aufgeführt werden sollen.

3. SCSS ins Projekt kopieren

Im folgenden Abschnitt findest du eine SCSS-Basisdatei, die ich in der Demo verwendet habe, um das Select-Feld auszublenden und stattdessen die Tom-Select Komponente zu gestalten:

// _tom-select.scss

//
// COMPONENTS/TOM-SELECT
// --------------------------------------------------

.nav--search {
  max-width: 20rem;

  &:has(.ts-wrapper) {
    .widget-submit {
      display: none;
    }
  }

  .ts-hidden-accessible {
    @include invisible;
  }
  .ts-wrapper {
    position: relative;

    &.has-items {
      input {
        display: none;
      }
    }
  }

  .ts-control {
    border-radius: var(--base-border-radius);
    border: var(--base-border);
    overflow: hidden;
    width: 100%;
    background-color: var(--color-white);
    padding: var(--base-spacing-unit-sm) var(--base-spacing-unit);

    input {
      width: 100%;
      border: none;
      background-color: transparent;
      padding: 0;

      &:focus {
        outline: none;
      }
    }

    .item {
      white-space: nowrap;
      padding: 0;
      background-color: var(--color-white);
      position: relative;
    }
  }

  .ts-dropdown {
    border: var(--base-border);
    border-top: none;
    background: var(--color-white);
    max-height: calc(7rem * var(--base-line-height));
    overflow-y: auto;
    padding: 0 0 0.5rem;
    border-radius: 0 0 var(--base-border-radius) var(--base-border-radius);
    position: absolute;
    z-index: 1001;
    width: 100%;

    .dropdown-header {
      position: sticky;
      top: 0;
      background: var(--color-white);
      color: var(--accent-color-dark);
      padding: 0.5rem 1rem;

      .dropdown-header-close {
        display: none;
      }
    }

    .no-results {
      padding: 0.5rem 1rem 0;
    }

    .option {
      cursor: pointer;
      padding: 0.25rem 1rem;
    }

    .active {
      background: var(--color-tint);
    }
  }

  .dropdown-active .ts-control {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
  }
}

4. Template anlegen und aktivieren

Im letzten Schritt legst du ein Template an, in dem du das heruntergeladene Tom Select Script lädst und über Parameter konfigurierst.

<?php
// Template: js_tom-select.html5

// hier den Pfad zum heruntergerladenen tom select script angeben
?>
<script src="/files/theme/js/_tom-select.js"></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    let tomselect = document.querySelector('.nav--search');

    if (tomselect) {
      let tomSelectInstance = new TomSelect(
        tomselect.querySelector('select.select'),
        {
          // Parameter
          searchField: ['text', 'value'], //durchsucht Label und den Wert der Select-Option
          placeholder: "Was suchen Sie?",
          // Ausgabe für no results found anpassen
          render: {
            no_results: (data, escape) => {
              return `<div class="no-results">Keine Ergebnisse gefunden.</div>`
            },
          },
          // umlaute nicht verarbeiten
          diacritics: false,
        }
      );

      // automatischer Aufruf der Seite, wenn eine Auswahl getroffen wird
      tomselect
        .querySelector('.select')
        .addEventListener('change', function () {
          this.closest('form').submit();
        });
    }
  });
</script>

Außerdem musst du das Template über das Seitenlayout aktivieren.

Wenn du nun die Seite neu lädst und alles korrekt eingestellt hast, dann sollte das Select-Feld der Quick-Navigation verschwinden und stattdessen das gestaltete Suchfeld von Tom Select JS zu sehen sein.

Siehe auch: Tom Select: durchsuchbare Select-Felder