Auto-suggest component for browser.style
npm install @browser.style/auto-suggestA customizable web component that provides search input with auto-suggest functionality, supporting both datalist and popover list modes.
``bash`
npm install @browser.style/auto-suggest
`javascript`
import '@browser.style/auto-suggest';
`html
api-value-path="id"
api-display-path="name"
label="Search"
placeholder="Type to search">
api-value-path="id"
api-display-path="name"
label="Search"
list-mode="ul"
placeholder="Type to search">
`
- api (required): API endpoint for fetching suggestionsapi-value-path
- : Path to value in API responseapi-display-path
- : Path to display text in API responseapi-text-path
- : Path to additional text in API responseapi-array-path
- : Path to array in nested API responsecache
- : Enable result caching (true/false)debounce
- : Debounce time in ms (default: 300)display
- : Initial display valueinvalid
- : Custom validation messagelabel
- : Input labellist-mode
- : Display mode ('datalist' or 'ul')minlength
- : Min. characters before search (default: 3)noform
- : Exclude from form submissionnolimit
- : Allow free text inputvalue
- : Initial value
- autoSuggestSelect: Option selectedautoSuggestClear
- : Input clearedautoSuggestFetchStart
- : Fetch startedautoSuggestFetchEnd
- : Fetch completedautoSuggestFetchError
- : Fetch failedautoSuggestNoResults
- : No results foundautoSuggestNoSelection
- : Enter pressed (requires nolimit)
The component integrates with forms and provides both value and displayValue:
`html`
Access form values:
`javascript``
const form = document.querySelector('form');
const suggest = form.elements.search;
console.log(suggest.value); // Selected value
console.log(suggest.displayValue); // Display text