infinite-autocomplete

The infinite-autocomplete component is like all these autocomplete out there, except that he is "Infinite" - which means that scrolling will fetch more data

Ease of use, written totally in Pure Functional Programming mindset!

Live Demo

Popular Frameworks Wrappers

• ng-infinite-autocomplete (AngularJS 1.x)
• react-infinite-autocomplete
• vue-infinite-autocomplete

Install

npm i -S infinite-autocomplete

Usage

import InfiniteAutocomplete from 'infinite-autocomplete';

// Static data source
InfiniteAutocomplete({
    data: [
        { text: 'Islam Attrash', value: 1},
        { text: 'Shai Reznik', value: 2},
        { text: 'Uri Shaked', value: 3},
        { text: 'Salsabel Eawissat', value: 4}
    ],
    onSelect: ({ id, text }) => {
        // do something useful!
    }
}, document.getElementById('app'));

// Dynamic data source
InfiniteAutocomplete({
    value: 'test', // input initial value
    data: (text, page, fetchSize) => {
        return new Promise(function(resolve) {
            fetch(`http://localhost:5000/data?text=${text}&page=${page}&fetchSize=${fetchSize}`)
            .then((response) => response.json())
            .then((options) => resolve(options))
        });
    }
}, document.getElementById('app'));

InfiniteAutocomplete function is also a curried function! which means that we can set a specific configuration and render the autocomplete with these configurations for multiple DOM nodes!

const citiesInfinite = InfiniteAutocomplete({
    data: () => new Promise((resolve) => {
        ...
        resolve(cities);
    })
});

// Some page
const firstCities = citiesInfinite(DOM1);

// Another page
citiesInfinite(DOM2);

// You can update the options by passing the new slice into setState
firstCities.setState({ fetchSize: 15 });

// You can destroy the component by calling destroy
firstCities.destroy();

Options

{
    /**
     * current value
     */
    value?: string;
    /**
     * data source
     */
    data?: IOption[] | (inputText: string, fetchSize: number, page: number) => Promise<IOption[]>;
    /**
     * Chunk fetch size
     */
    fetchSize?: number,
    /**
     * on-select event output handler when choosing an option
     */
    onSelect?(IOption);
}

Where IOption stands for =>

interface IOption {
    id: number | string;
    text: string;
}