Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

🗂 Dependency-free component that implements live-search to any input element via datalist

NotificationsYou must be signed in to change notification settings

PonomareVlad/fetched-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

25 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

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

Demo

How to use

1. Load module

<!-- From CDN --><scriptsrc="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 --><inputid="inputId"><!-- ... --><fetched-listvalue-from="inputId"></fetched-list>

3. Configure

<!-- From demo/index.html --><fetched-listurl="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"><inputautocapitalize="words"placeholder="Type any Country"type="search"></fetched-list>

Properties

PropertyAttributeDescription
urlurlAPI endpoint for fetching options
paramparamName of query parameter where to put text from input
checkcheckAbsolute JSON path to property that indicate successful response
listPathlist-pathAbsolute JSON path to property that contains array with options
valuePathvalue-pathRelative JSON path to property that contains value of each option
labelPathlabel-pathRelative JSON path to property that contains label of each option
titleCasetitle-caseAutomatically capitalize first letter when typing
valueFromvalue-fromID of outer input element to be used instead of inner input
autoSelectauto-selectAutomatically select most relevant variant from list
initialFetchinitial-fetchPrefetch an options before input
removeOptionsremove-optionsClear list of options before populating

About

🗂 Dependency-free component that implements live-search to any input element via datalist

Topics

Resources

Stars

Watchers

Forks

[8]ページ先頭
©2009-2025 Movatter.jp