@trevoreyre/autocomplete

    2.2.0 • Public • Published

    @trevoreyre/autocomplete

    The core package provides the base functionality of the autocomplete component. It provides an instance to track the current state, and event handlers to respond to user input. It doesn't actually render anything to the DOM, so that it can remain flexible and be used in multiple platforms.

    The best way to learn how to use the core package is to take a look at the source code of other components that provide a rendering layer on top of it, like the JavaScript component and the Vue component

    Demo

    Take a look at the documentation page, and the Codepen examples.

    Installation

    Install the component from npm.

    npm install --save @trevoreyre/autocomplete

    Or using yarn.

    yarn add @trevoreyre/autocomplete

    You can also use the browser bundle in a script tag.

    <script src="https://unpkg.com/@trevoreyre/autocomplete"></script>

    Usage

    The core package provides a class instance to handle the internal state of the autocomplete component. The component can be tweaked using a number of constructor arguments.

    const autocomplete = new Autocomplete(options)

    Arguments

    Argument Type Description
    search Function (required) The search function to be executed on user input. Can be a synchronous function or a Promise.
    autoSelect Boolean Controls whether first result should be highlighted after input
    setValue Function Sets the value of the calling component's input element
    setAttribute Function Sets attributes on the calling component's input element
    onUpdate Function Fired when the results list is updated. Receives results (Array), and selectedIndex (Number) as arguments.
    onSubmit Function Fired when user submits result. Receives result as argument.
    onShow Function Fired when the results list is shown
    onHide Function Fired when the results list is hidden
    onLoading Function Fired if search is a Promise and hasn't resolved yet
    onLoaded Function Fired after asynchronous search function resolves

    Event handlers

    The core package provides a number of event handlers that can be wired up in the calling component.

    Name Description
    handleInput Handles the input element's input event
    handleKeyDown Handles the input element's keydown event
    handleBlur Handles the input element's blur event
    handleResultMouseDown Handles the ul element's mousedown event
    handleResultClick Handles the ul element's click event

    Install

    npm i @trevoreyre/autocomplete

    DownloadsWeekly Downloads

    679

    Version

    2.2.0

    License

    MIT

    Unpacked Size

    32.8 kB

    Total Files

    14

    Last publish

    Collaborators

    • trevoreyre