SFiltrableInputComponent
This component represent a filtrable input to display and filter a list of items easily.
Preview
Simple example
Loading code example. Please wait...
Loading code example. Please wait...
Custom templates and items
Loading code example. Please wait...
Loading code example. Please wait...
Features
-
Framework agnostic. Simply webcomponent.
-
Fully customizable
-
Built-in search
Import
Install
Events
-
s-filtrable-input.items
Dispatched when the items are setted of updated
-
s-filtrable-input.select
Dispatched when an item has been selected
-
s-filtrable-input
Dispatched for every events of this component. Check the detail.eventType prop for event type
Interface
-
itemsString|Function
Specify an array of items to use in your filtrable list. Can be a JSON string, a function that take an object with the "value" property and must return an array of items to use
-
valuevalueString
Specify the attribute in your items to use as a value. Can be also a function that will be called with an object containing the selected item and must return the string you want to use as value
-
labelvalueString|Function
Specify the attribute in your items to use as a label. Can be also a function that will be called with an object containing the selected item and must return the string you want to use as label
-
emptyTextNo item to displayString
Specify the text to use for the default "empty" (no result) state
-
searchValuePreprocessFunction
Specify a function used to preprocess the value just before actually searching through the items
-
loadingTextLoading please wait...String
Specify the text to use for the default "loading" state
-
filterFunction
Specify a function to use to filter the items. Must return the filtered list of items
-
filtrable[]Array<String>
Specify all the properties of your "item" to use as source for the filtrable process
-
showKeywordsfalseBoolean
Specify if you want to display the "keywords" section on top of the list results
-
templatesObject|Function
Specify either an object with properties like "item", "empty" and "loading", or a function returning the good template depending on tne "type" argument property
-
closeTimeout100Number
Specify the duration before closing the list when having selected an item
-
interactivefalseBoolean
Specify if your items in the list are interactive or not to let the user click and interact with them
-
closeOnSelectfalseBoolean
Specify if you wantr to close the list when selecting an item
-
resetOnSelecttrueBoolean
Specify if you want your filtrable input to be reseted on select
-
notSelectablefalseBoolean
Specify if you want the items to be not selectable
-
maxItems25Number
Specify the maximum number of items to display at first in the list
-
classes{}Object
Specify some additional classes to add to the component elements
-
inlinefalseBoolean
Specify if you want the filterable input list to be always displayed and inline in the html