Skip to content

Latest commit

 

History

History
107 lines (79 loc) · 3.81 KB

README.md

File metadata and controls

107 lines (79 loc) · 3.81 KB
Raw

autocomplete

Compatibility

This project is aiming for wide compatibility in modern, supported browsers.

It uses eslint-plugin-compat to ensure contributors are aware when they introduce compatibility issues.

Higher compatibility version for unsupported browsers

If you require compatibility with browsers no longer supported by their vendors (old internet explorer, old Safari, etc), you can use the higher compatibility version: dist/autocomplete-compat.js

This version is transpiled back to ES5

Requirements

  • 100% test coverage
  • WAI-ARIA
  • Local data support
  • Remote data support
  • Error handling
  • i18n
  • Busy state (initiate after 50ms)
  • Display pane above/below input element
  • Mobile/touch friendly
  • Pane should be same width as input
  • Custom rendering of elements (demo with flags)
  • Emit event/trigger callback with original data, not rendered data
  • Debounce event listener on function dataSrc
    • Debounce config option
  • Dark mode
  • Highlight with border (use border-box, instead of content-box)
  • [*] Mouse and touch selection
  • localFilterMode: begin - beginning of string anywhere - anywhere in string split - match on each character
  • Prevent flickering, somehow maintain height when loading more data
  • Investigate debounce, looks like it is still making many requests, despite debouncing
  • Can this work without being called with new? If not, make sure it IS called with new
  • [*] Set title attribute options, so that browsers can display the whole text, even when the pane is constrained
  • [*] Use tab to select a value, when suggestions are open
  • Run coverage reports in Node 10, as nyc doesn't work well in later nodes

Shout out to Lea Verou for her work on Awesomplete.

Ideas

  • Inline mode, like terminal, show a cursor and allow tab to complete

Examples

<input type="text" id="country" name="country" />

const input = document.querySelector("#country");

// with simple values
const simpleValues = ["Denmark", "Germany", "Sweden"];
const autocomplete = new Autocomplete(input, simpleValues);

// with complex values
const complexValues = [
    { id: "DNK", label: "Denmark" },
    { id: "GER", label: "Germany" },
    { id: "SWE", label: "Sweden" }
]
const autoComplete = new Autocomplete(input, complexValues);

// with url template
const urlTemplate = "https://restcountries.eu/rest/v2/name/{query}"
const autocomplete = new Autocomplete(input, urlTemplate);

// with function
async function countries(query) {
    const url = `https://restcountries.eu/rest/v2/name/${query}`
    return fetch(url);
}
const autocomplete = new Autocomplete(input, countries);

Configuration

Options

Property Default value Description
autoFirst false When set, the first suggestion will be automatically highlighted
maxItems 5 The number of suggestions to display
minChars 3 The number of characters required before searching (when using remote)
render undefined A custon Function render data

Events / callbacks

Event Payload Description
busy undefined Triggers before async operations
ready undefined Triggers after async operations
selected The value selected or undefined Triggers when a value is selected