LiveFilter - Instant text filtering for any list

You already know the feeling: you open Drupal's Extend page, start typing, and the module list narrows down instantly — no page reload, no wait. LiveFilter brings that same instant-search experience to any list or table on your Drupal site, without writing a single line of JavaScript.

Place a LiveFilter block next to any list of content — a glossary, a staff directory, a product catalogue, a FAQ section — and your visitors can filter it in real time, just by typing.

Features

CSS/XPath selectors
Configurable selectors for what to search and what to filter. Lightweight & dependency-free
Pure JavaScript, no external libraries. Minimal footprint on page load. Theme-agnostic
Renders a plain text input. Style it however your theme demands. Drupal 9, 10 & 11 compatible
Stable release covered by the Drupal Security Advisory Policy.

Examples

• 200+ articles: https://stadtwandler.org/articles
• Example filtering leaflet marker icons: https://www.stadtwandler.org/map

Getting Started

Install via Composer:

composer require drupal/livefilter
drush en livefilter

How-To: Filtering the drupal frontpage view

• Go to Structure → Block layout and place a LiveFilter block in the region of your choice.

In the block configuration:

• Set the Elements selector field to: .views-row
• Set the Text XPath field to: .//article

Contributing:

The project welcomes merge requests.

See the Contributor Guide for help with issue forks and merge requests on Drupal.org.

Consulting, training and coding for complex drupal projects. With 20 years of drupal coding and compelling contributions, we hook in when it gets dicey.

Contact us