fetched-list
v0.0.10
Published
Dependency-free component that implements live-search (value suggestion) to any <input> element via <datalist>
Downloads
8
Maintainers
Readme
< fetched-list >
Dependency-free component that implements live-search (value suggestion) to any <input>
element via <datalist>
How to use
1. Load module
<!-- From CDN -->
<script src="https://esm.run/fetched-list" type="module"></script>
2. Connect <input>
element
<!-- Just wrap any input -->
<fetched-list>
<input>
</fetched-list>
<!-- Or refer to it by ID -->
<input id="inputId">
<!-- ... -->
<fetched-list value-from="inputId"></fetched-list>
3. Configure
<!-- From demo/index.html -->
<fetched-list
url="http://geodb-free-service.wirefreethought.com/v1/geo/countries?limit=10"
param="namePrefix" check="metadata.totalCount" list-path="data" value-path="name"
label-path="code" title-case="true" initial-fetch="true" auto-select="true">
<input autocapitalize="words" placeholder="Type any Country" type="search">
</fetched-list>
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 |