List.js

list.js is a JavaScript search and sort library used to add real-time filtering, sorting, and pagination to HTML lists and tables without backend dependencies. It functions as a DOM data indexer and template-driven HTML renderer, allowing developers to manage how data is displayed and discovered on the client side.

The library distinguishes itself through a fuzzy string matching engine that handles approximate matches and typos, and a DOM data indexer that extracts values directly from HTML data attributes to build a searchable internal index. It uses a template-driven rendering system to generate list item layouts from JavaScript objects using configurable strings or functions.

The project covers a broad range of frontend capabilities, including locale-aware sorting with custom comparators, client-side pagination for managing large datasets, and condition-based filtering. It also provides tools for asynchronous item management, search input debouncing, and JSON data export.

Features

DOM Data Indexing - Extracts data from HTML attributes and classes to build the primary internal index used for search and sort.

JavaScript Search and Sort Libraries - Provides real-time filtering, sorting, and pagination for HTML elements without backend requirements.

Pagination Controls - Provides UI components for splitting large datasets into manageable, numbered pages.

Fuzzy Matching - Implements algorithms for calculating string similarity and highlighting matches in search interfaces.

Pagination - Splits large datasets into manageable visual pages to improve browser performance.

Text Search - Provides text-based search using AND logic and exact phrase matching.

Approximate String Searching - Implements an approximate string matching algorithm to find the closest textual matches for search queries.

Client-Side List Reordering - Enables dynamic rearrangement of HTML list items or table rows based on custom criteria.

Client-Side Search Filtering - Implements real-time filtering and matching of items against search queries within the user interface.

CSS Selector-Based Search Attachments - Attaches search and filter behavior to specific HTML elements by targeting their CSS classes.

List Item Renderers - Uses customizable template functions to define the HTML structure of individual list entries.

Dynamic HTML Generators - Programmatically creates and updates HTML elements to render data views from JavaScript objects.

Data-Driven List Population - Generates HTML list elements from arrays of JavaScript objects using property-matching templates.

HTML Markup Templates - Provides customizable string templates to generate the internal HTML structure of list items.

HTML Template Renderers - Generates list item HTML by merging JavaScript data objects with configurable string or function templates.

Table Sorting Logic - Reorders table rows or list items based on user interaction with column headers.

Client-Side Pagination Utilities - Provides JavaScript utilities for splitting large datasets into sequential pages within the browser.

DOM-Based Data Indexing - Maps HTML elements and data attributes to an internal structure for efficient client-side querying.

DOM Data Indexers - Extracts data from HTML attributes to create a searchable internal representation of the DOM.

Fuzzy Search Libraries - Provides approximate string matching and relevance ranking for JavaScript datasets to handle typos.

HTML Data Attribute Extraction - Extracts values from custom HTML data attributes to build a searchable internal index of list items.

Data Attribute Mappings - Links HTML data attributes to internal fields to enable seamless searching and sorting of DOM elements.

Conditional Data Filters - Provides logic for filtering list items based on user-defined predicate conditions.

Asynchronous Index Building - Implements background index construction to ensure the user interface remains responsive during data processing.

List Configuration - Allows setting initial options for templates, search columns, and pagination during list initialization.

Category-Based Filters - Hides or shows list items based on category selections or range-based rules.

DOM-State Mapping Layers - Synchronizes an internal data model with HTML elements by reading custom attributes from the document object model.

Custom Sort Comparators - Uses custom comparator functions and native internationalization to provide locale-aware alphabetical sorting of list items.

Search Input Debouncing - Delays search execution until the user stops typing to reduce processing overhead.

Visibility Toggles - Toggles the visibility of list items using CSS classes to hide non-matching elements without removing them from the DOM.

State-Preserving Item Insertion - Inserts new data elements into HTML lists or tables while preserving the active search, sort, and filter state.

DOM Index Rebuilding - Synchronizes the internal data index by re-scanning the current state of the document object model.

javvelist.js

Features

Star history