jb-searchbar

searchbar web component

Usage no npm install needed!

<script type="module">
  import jbSearchbar from 'https://cdn.skypack.dev/jb-searchbar';
</script>

README

jb-searchbar

minimalistic customizable search bar web-component sample:https://codepen.io/javadbat/pen/rNjrZpy

usage


npm i jb-searchbar

import 'jb-searchbar';
<jb-searchbar></jb-searchbar>

attributes

placeholder


<jb-searchbar placeholder="please choose column"></jb-searchbar>

set filter list

filter list is a list of your filter you want user choose filter from and set like this:

document.querySelector('jb-searchbar').columnList = [
        {
            key: 'title',
            label: 'تیتر',
            type: 'TEXT'
        },
        {
            key: 'name',
            label: 'نام',
            type: 'TEXT',
            maxUsageCount: 3
        },
        {
            key: 'age',
            label: 'سن',
            type: 'TEXT'
        },
        {
            key: 'fromDate',
            label: 'از تاریخ',
            type: 'DATE'
        },
        {
            key: 'GENDER',
            label: 'جنسیت',
            type: 'SELECT',
            config: {
                optionList: [
                    {
                        title: 'آقا',
                        value: 'MALE'
                    },
                    {
                        title: 'خانم',
                        value: 'FEMALE'
                    }
                ],
                getOptionTitle: (option) => {
                    return option.title;
                },
                getOptionValue: (option) => {
                    return option.value;
                }
            }

        },
        {
            key: 'fromDate',
            label: 'تا تاریخ',
            type: 'DATE'
        }
    ]