SFiltrableInputComponent

This component represent a filtrable input to display and filter a list of items easily.

Platform  
html
   â”‚    Support  
Chromium supported
Firefox supported
Safari supported
Edge supported
Since  2.0.0
   â”‚   
Olivier Bossel
Olivier Bossel
   â”‚   
beta

  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

  1. s-filtrable-input.items

    Dispatched when the items are setted of updated

  2. s-filtrable-input.select

    Dispatched when an item has been selected

  3. s-filtrable-input

    Dispatched for every events of this component. Check the detail.eventType prop for event type

  Interface

  1. items
    String|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

  2. value
    value
    String

    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

  3. label
    value
    String|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

  4. emptyText
    No item to display
    String

    Specify the text to use for the default "empty" (no result) state

  5. searchValuePreprocess
    Function

    Specify a function used to preprocess the value just before actually searching through the items

  6. loadingText
    Loading please wait...
    String

    Specify the text to use for the default "loading" state

  7. filter
    Function

    Specify a function to use to filter the items. Must return the filtered list of items

  8. filtrable
    []
    Array<String>

    Specify all the properties of your "item" to use as source for the filtrable process

  9. showKeywords
    false
    Boolean

    Specify if you want to display the "keywords" section on top of the list results

  10. templates
    Object|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

  11. closeTimeout
    100
    Number

    Specify the duration before closing the list when having selected an item

  12. interactive
    false
    Boolean

    Specify if your items in the list are interactive or not to let the user click and interact with them

  13. closeOnSelect
    false
    Boolean

    Specify if you wantr to close the list when selecting an item

  14. resetOnSelect
    true
    Boolean

    Specify if you want your filtrable input to be reseted on select

  15. notSelectable
    false
    Boolean

    Specify if you want the items to be not selectable

  16. maxItems
    25
    Number

    Specify the maximum number of items to display at first in the list

  17. classes
    {}
    Object

    Specify some additional classes to add to the component elements

  18. inline
    false
    Boolean

    Specify if you want the filterable input list to be always displayed and inline in the html

Bugs
are not our friends...

Don't hesitate to declare an issue if something does not works as expected.

Declare my issue on Github Talk about it on Discord

The more we are,
the stronger we become.

Don't hesitate to tell some words to you friends about us. The goal is to became more and more each days to help each others...

Support us on Patreon! Share on Facebook! Make a tweet!

The more we are,
the stronger we become.

Don't be afraid to join us on Discord.

Join us on discord!

We love,
Open source!

All of our codebase can be found on Github. We hope that you may contribute to help us make our tools even better!

Discover our codebase!

Welcome on