# leaverou/awesomplete

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/leaverou-awesomplete).**

6,979 stars · 600 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/LeaVerou/awesomplete
- Homepage: http://leaverou.github.io/awesomplete/
- awesome-repositories: https://awesome-repositories.com/repository/leaverou-awesomplete.md

## Description

Awesomplete is a lightweight JavaScript library for adding searchable suggestion lists to text fields. It functions as an HTML-based autocomplete widget that renders filtered results from arrays, HTML elements, or comma-separated strings with zero external dependencies.

The library includes a customizable suggestion engine that allows for the definition of custom matching logic, sorting rules, and trigger thresholds. It is designed as an event-driven UI component, providing a programmable interface to intercept selection events and manage the state of the suggestion popup.

The system supports dynamic suggestion rendering through HTML overrides and provides a mechanism to map raw data into label-value pairs. It also allows for the programmatic control of widget state and the implementation of custom callbacks to validate or cancel user selections.

## Tags

### User Interface & Experience

- [Autocomplete Inputs](https://awesome-repositories.com/f/user-interface-experience/text-input-widgets/autocomplete-inputs.md) — Provides a searchable suggestion list for form fields using arrays, HTML elements, or strings. ([source](https://github.com/leaverou/awesomplete#readme))
- [Autocomplete Suggestion Engines](https://awesome-repositories.com/f/user-interface-experience/autocomplete-suggestion-engines.md) — Ships a customizable engine for defining custom matching logic, sorting rules, and trigger thresholds.
- [Matching Logic](https://awesome-repositories.com/f/user-interface-experience/matching-logic.md) — Provides a replaceable filtering function to control which suggestions appear based on user input.
- [Searchable Select Inputs](https://awesome-repositories.com/f/user-interface-experience/selection-lists/searchable-select-inputs.md) — Implements text input fields with integrated search capabilities to filter and select options from a predefined list.
- [Suggestion Behaviors](https://awesome-repositories.com/f/user-interface-experience/suggestion-behaviors.md) — Allows configuration of matching, sorting, trigger thresholds, and maximum displayed items. ([source](https://leaverou.github.io/awesomplete/))
- [Custom Components](https://awesome-repositories.com/f/user-interface-experience/custom-components.md) — Implements the autocomplete widget as a native web component for encapsulated state and lifecycle.
- [Event-Driven State Managers](https://awesome-repositories.com/f/user-interface-experience/event-driven-state-managers.md) — Triggers custom callbacks during input and selection events to allow external logic to modify behavior.
- [Event-Driven Component Interfaces](https://awesome-repositories.com/f/user-interface-experience/event-driven-ui-frameworks/event-driven-component-interfaces.md) — Provides a programmable interface with callbacks for intercepting selection events and managing popup state.
- [Event Handling](https://awesome-repositories.com/f/user-interface-experience/form-and-input-management/interaction-and-event-handling/event-handling-architectures/event-handling.md) — Executes custom logic when the suggestion list opens, closes, or is interacted with. ([source](https://leaverou.github.io/awesomplete/))
- [Contextual Popups](https://awesome-repositories.com/f/user-interface-experience/styled-properties/popup-styling/contextual-popups.md) — Allows programmatic control over the visibility and navigation of the suggestion popup. ([source](http://leaverou.github.io/awesomplete/))
- [Dynamic Markup Injection](https://awesome-repositories.com/f/user-interface-experience/template-injection-hooks/markup-injection-directives/dynamic-markup-injection.md) — Generates and injects suggestion list HTML into the DOM based on filter results.

### Web Development

- [Autocomplete Libraries](https://awesome-repositories.com/f/web-development/autocomplete-libraries.md) — Provides a lightweight JavaScript library for building searchable input fields with real-time suggestions.
- [Programmatic Controllers](https://awesome-repositories.com/f/web-development/state-management/local-widget-state/programmatic-controllers.md) — Provides direct command methods to manually open, close, or navigate the suggestion list. ([source](https://leaverou.github.io/awesomplete/))

### Data & Databases

- [Custom Matching Logic](https://awesome-repositories.com/f/data-databases/search-indexing-technologies/search-indexing/search-information-retrieval/matching-ranking-logic/custom-matching-logic.md) — Enables the definition of custom rules for matching input strings and ordering the resulting list. ([source](https://leaverou.github.io/awesomplete/))

### Part of an Awesome List

- [Html Widgets](https://awesome-repositories.com/f/awesome-lists/media/html-widgets.md) — Implements an interactive HTML-based widget that renders filtered suggestion lists for user selection.
- [Form Components](https://awesome-repositories.com/f/awesome-lists/devtools/form-components.md) — Lightweight autocomplete library with no dependencies.

### Development Tools & Productivity

- [Custom Suggestion Templates](https://awesome-repositories.com/f/development-tools-productivity/terminal-shell-cli/cli-tooling-frameworks/command-suggestion-tools/suggestion-ui-components/custom-suggestion-templates.md) — Supports customizing the HTML generation for the suggestion container and individual items. ([source](https://leaverou.github.io/awesomplete/))

### Software Engineering & Architecture

- [Component Logic Overrides](https://awesome-repositories.com/f/software-engineering-architecture/component-logic-overrides.md) — Allows overriding default functions to change how entries are filtered and rendered. ([source](http://leaverou.github.io/awesomplete/))