https://github.com/ryuever/fixed-data-select
Interactive Select with typing auto-completion.
https://github.com/ryuever/fixed-data-select
auto-complete fiexd-data select
Last synced: 3 months ago
JSON representation
Interactive Select with typing auto-completion.
- Host: GitHub
- URL: https://github.com/ryuever/fixed-data-select
- Owner: ryuever
- Created: 2018-01-18T08:09:01.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-01-23T08:03:30.000Z (over 8 years ago)
- Last Synced: 2025-10-26T16:41:57.987Z (8 months ago)
- Topics: auto-complete, fiexd-data, select
- Language: JavaScript
- Homepage:
- Size: 45.9 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# fixed data select
Interactive Select with typing auto-completion. It has following features:
- Optimization of list display(Todo): For big data, it will only display limited number of items;
- auto-completion when types: Recently, the filtered display data is processed locally; you could provide customization filter which will apply when you typeing. As default, it means the match the regexp
```js
new RegExp(e.target.value).test(item)
```
- uparrow, downarrow and Enter key stroke handle automatically.
## usage
```js
new FixedDataSelect({
target,
dataSource,
itemHeight: 31,
onPress: (record) => {
// ...
},
onItemClick: (record) => {
// ...
},
});
```
## API
### `FixedDataSelect`
Just like its name, it aim to process a list display with fixed data;
- `dataSource(Array)`: Data source which are used to display on the list.
- `target(HTMLElement)`: The target node list will bind with.
- `onPress(function)`: The callback function which will be triggered on press Enter.
- `onItemClick(function)`: The callback function which will be triggered on click on the list item.
- `itemHeight(Number)`: It is required which indicate the height of list item. It could be used to calculate current active item's position.