Link Filter

Super simple plugin to filter ( show/hide ) list of links based on some input element value.

Overview

Filtering the list is done on every user keyup event with delay 300ms. The not match element will not removed from DOM, they only invisible to user by style display:none css.

If the related input has no value, all the item inside the list will be shown.

Pressing key UP or DOWN on your keyboard will add class active to some of the list child. While pressing ENTER will trigger click event to the first <a> of list child.

Examples

Filter

Non Direct Link

It for sure allow list with direct child is not a link, the Enter action will click the first child of the list child that is an <a>.

Custom Text

If your content has so many text in it, it's better to add custom data attribute called data-text that keep text as a search query. By doing this, the search action will only find based on the attribute.

Hide Result On No Query

Usage

Via data attribute

The option can be passed by data attribute as in data-input="#...". But you still need to call it with JavaScript.

Via JavaScript

Options

Options can be passed via data attribute or JavaScript. For data attributes, append the option name to data-, as in data-input="...".

Name Type Default Description
active string active The active class to set for active link item.
delay number 300 The delay time before executing the finding action in ms.
empty boolean false Empty the result when no query search provided.
input string null The input selector for finding comparation text.