Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-searchbar
https://github.com/javadbat/jb-searchbar
Last synced: 7 days ago
JSON representation
- Host: GitHub
- URL: https://github.com/javadbat/jb-searchbar
- Owner: javadbat
- License: mit
- Created: 2020-09-21T12:10:16.000Z (over 4 years ago)
- Default Branch: master
- Last Pushed: 2024-11-12T14:01:00.000Z (about 1 month ago)
- Last Synced: 2024-11-12T15:18:04.199Z (about 1 month ago)
- Language: TypeScript
- Size: 133 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-searchbar
minimalistic customizable search bar web-component for adding filter options in minimum space
sample:
## usage
```cmd
npm i jb-searchbar
```
```js
import 'jb-searchbar';
```
```html
```
## attributes
### placeholder
```html
```
## set filter list
filter list is a list of your filter you want user choose filter from and set like this:
## search on change
you can trigger search by clicking on search button, if you want to trigger it on every change set `searchOnChange` like this:
```javascript
document.querySelector('jb-searchbar').searchOnChange = true;
```
```js
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'
}
]
```
## css variables
| Name | Description | Default Value |
|-------------------------------------|--------------------------------------------|----------------|
| --jb-searchbar-filter-item-bg-color | background color of completed filter item | #408cff |
| --jb-searchbar-filter-item-color | text color of ompleted filter item | #fff |