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
Install
npm i -S infinite-autocompleteUsage
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;
}
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent