leaverou/awesomplete

★ 6,981JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((repo))
    What it does
      Autocomplete dropdown
      Text input suggestions
      No dependencies
    Features
      HTML attribute config
      Custom suggestion lists
      Min chars before dropdown
    Tech
      JavaScript
      CSS
    Setup
      Include JS file
      Include CSS file
      Add data-list attribute

mindmap root((repo)) What it does Autocomplete dropdown Text input suggestions No dependencies Features HTML attribute config Custom suggestion lists Min chars before dropdown Tech JavaScript CSS Setup Include JS file Include CSS file Add data-list attribute

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add instant autocomplete suggestions to a search box without pulling in a large UI library.

USE CASE 2

Give a form's country or city field a dropdown of suggestions that appears as the user types.

USE CASE 3

Add tag autocomplete to a blogging or note-taking app using a static list of existing tags.

Tech stack

JavaScriptCSS

Getting it running

Difficulty · easy Time to first run · 5min

Use freely in any personal or commercial project as long as you keep the copyright notice.

In plain English

Awesomplete is a small JavaScript library that adds autocomplete suggestions to text input fields on a web page. When a user starts typing in a form field, the widget displays a dropdown list of matching options drawn from a list the developer provides. It requires no other libraries to function and works in modern browsers without extra dependencies. Adding it to a project is straightforward: you include one CSS file and one JavaScript file in your HTML page, then attach the widget to any input field. You can specify the suggestion list directly in the HTML using a data-list attribute, or by pointing to an existing list element elsewhere on the page. The widget picks up the suggestions automatically when the page loads, so no additional scripting is required for the basic case. The library offers a handful of configuration options. Developers can control how many characters a user must type before the suggestion dropdown appears (the default is two), how many suggestions to show at once (the default is ten), and whether the first suggestion should be pre-selected automatically. These settings can be applied either in JavaScript or as HTML attributes directly on the input element, which makes simple setups possible without writing any extra code. Awesomplete is released under the MIT License, meaning it is free to use in personal and commercial projects alike. The source is open and has received contributions from many developers since its creation by Lea Verou. Full documentation and a live demo are available on the official project site.

Copy-paste prompts

Prompt 1

Using Awesomplete, write the HTML and JavaScript to add autocomplete to a search input that suggests country names from a hardcoded JavaScript array.

Prompt 2

I want Awesomplete to fetch autocomplete suggestions from my REST API as the user types instead of using a static list. Write the JavaScript to replace the default list with dynamic server responses.

Prompt 3

How do I override the default Awesomplete CSS to style the dropdown to match a dark-theme site, changing the background, text color, and highlight color?

Open on GitHub → Explain another repo

← leaverou on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.