javve/list.js
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.
- General Utilities - Adds search, sort, and filter to HTML lists.
