https://github.com/ponomarevlad/fetched-list
🗂 Dependency-free component that implements live-search to any input element via datalist
https://github.com/ponomarevlad/fetched-list
combobox component datalist fetch input live live-search options search suggestions
Last synced: about 1 month ago
JSON representation
🗂 Dependency-free component that implements live-search to any input element via datalist
- Host: GitHub
- URL: https://github.com/ponomarevlad/fetched-list
- Owner: PonomareVlad
- Created: 2022-04-30T09:35:42.000Z (about 3 years ago)
- Default Branch: master
- Last Pushed: 2023-03-22T10:41:30.000Z (about 2 years ago)
- Last Synced: 2025-02-25T04:04:58.058Z (4 months ago)
- Topics: combobox, component, datalist, fetch, input, live, live-search, options, search, suggestions
- Language: JavaScript
- Homepage: http://fetched-list.ponomarevlad.ru
- Size: 25.4 KB
- Stars: 3
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# < fetched-list >
Dependency-free component that implements **live-search** (value suggestion) to any `` element via ``
[Demo](http://fetched-list.ponomarevlad.ru/demo/)
## How to use
### 1. Load module
```html
```
### 2. Connect `` element
```html
```
### 3. Configure
```html
```
## Properties
| Property | Attribute | Description |
|-----------------|------------------|-------------------------------------------------------------------|
| `url` | `url` | API endpoint for fetching options |
| `param` | `param` | Name of query parameter where to put text from input |
| `check` | `check` | Absolute JSON path to property that indicate successful response |
| `listPath` | `list-path` | Absolute JSON path to property that contains array with options |
| `valuePath` | `value-path` | Relative JSON path to property that contains value of each option |
| `labelPath` | `label-path` | Relative JSON path to property that contains label of each option |
| `titleCase` | `title-case` | Automatically capitalize first letter when typing |
| `valueFrom` | `value-from` | ID of outer input element to be used instead of inner input |
| `autoSelect` | `auto-select` | Automatically select most relevant variant from list |
| `initialFetch` | `initial-fetch` | Prefetch an options before input |
| `removeOptions` | `remove-options` | Clear list of options before populating |