Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hsarchive/bootstrap-hardskilled-extend-select
Extended Select for Bootstrap 4 (analog bootstrap-select)
https://github.com/hsarchive/bootstrap-hardskilled-extend-select
bootstrap bootstrap4 custom jquery select
Last synced: 4 months ago
JSON representation
Extended Select for Bootstrap 4 (analog bootstrap-select)
- Host: GitHub
- URL: https://github.com/hsarchive/bootstrap-hardskilled-extend-select
- Owner: hsarchive
- License: mit
- Archived: true
- Created: 2017-12-28T11:20:57.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2018-02-09T14:44:47.000Z (almost 7 years ago)
- Last Synced: 2024-09-19T11:14:22.079Z (4 months ago)
- Topics: bootstrap, bootstrap4, custom, jquery, select
- Language: JavaScript
- Homepage: https://hardskilled.github.io/bootstrap-hardskilled-extend-select/docs/
- Size: 103 KB
- Stars: 18
- Watchers: 4
- Forks: 1
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Extended Select for Bootstrap 4 (alternative bootstrap-select)
[](https://github.com/hardskilled/bootstrap-hardskilled-extend-select/releases) [](https://badge.fury.io/js/bootstrap-hardskilled-extend-select) [](https://www.jsdelivr.com/package/npm/bootstrap-hardskilled-extend-select) [](https://github.com/hardskilled/bootstrap-hardskilled-extend-select/blob/master/LICENSE) [](https://david-dm.org/hardskilled/bootstrap-hardskilled-extend-select) [](https://david-dm.org/hardskilled/bootstrap-hardskilled-extend-select?type=dev)
## [Demo and documentation](https://hardskilled.github.io/bootstrap-hardskilled-extend-select/docs/)
You can require bootstrap plugin via cdn or [download](https://github.com/hardskilled/bootstrap-hardskilled-extend-select/releases) the archive with release and unzip into assets directory.
For install via npm, use command:
```bash
npm i --save bootstrap-hardskilled-extend-select
```
**To use CDN:**
```html
```
**Example usage:**
```html
$('select').extendSelect();
```
**Usage with options:**
```html
$('select').extendSelect({
// Search input placeholder:
search: 'Find',
// Title if option not selected:
notSelectedTitle: 'Pls select',
// Message if select list empty:
empty: 'Empty',
// Class to active element:
activeClass: 'active',
// Class to disabled element:
disabledClass: 'disabled',
// Custom error message for all selects (use placeholder %items):
maxOptionMessage: 'Max %items elements',
// Delay to hide message
maxOptionMessageDelay: 2000,
// Popover logic (resize or save height):
popoverResize: true,
// Auto resize dropdown by button width:
dropdownResize: true
});
```
| Key | Description | Default value |
| --- | --- | --- |
| search | Search input placeholder | Search |
| notSelectedTitle | Title if option not selected | Nothing to shown |
| empty | Message if select list empty | Nothing to shown |
| activeClass | Class to active element | `active` |
| disabledClass | Class to disabled element | `diabled` |
| maxOptionMessage | Custom error message for all selects (use placeholder %items) | Limit reached (%items items max) |
| maxOptionMessageDelay | Delay to hide message | 2000 |
| popoverResize | Popover logic (resize or save height) | `false` |
| dropdownResize | Auto resize dropdown by button width | `false` |
**To listen changes use .on('change') event:**
```javascript
$('select#basic').on('change', function () {
const selected = $(this).find(':selected').text();
$('#basicResult').text('Selected: ' + selected)
})
```
**HTML attributes to select:**
```html
Rabbit
Cat
Owl
Spider
Worm
Fly
```
| Attribute | Description | Default value |
| --- | --- | --- |
| data-live-search | Live search | `false` |
| data-max-options | Max selected options | Nothing to shown |
| data-max-options-message | Message if select limit overflow | Limit reached (%items items max) |
| data-live-search-placeholder | Search input placeholder | Search |
| data-hide-disabled | Hide disabled elements | `false` |
| data-btn-class | Button class for dropdown | btn-secondary |
| data-not-selected | Title if option not selected | Nothing to shown |
| data-empty | Message if select list empty | Nothing to shown |
| data-type | Custom select type (ex. checkbox) | `null` |
| multiple | Enable multiple selections | `false` |
[Hire us via Upwork!](https://www.upwork.com/o/companies/_~01b5cde52d5f4ead84/) | [Our website](https://hardskilled.com)