fetched-list

< fetched-list >

Dependency-free component that implements live-search (value suggestion) to any <input> element via <datalist>

Demo

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