Author: | Blobfolio |
---|---|
Views Total: | 644 views |
Official Page: | Go to website |
Last Update: | November 14, 2018 |
License: | MIT |
Preview:

Description:
blob-select is a blazing fast, easy-to-use and multifunctional select box replacement plugin implemented in pure JavaScript.
Features:
- Live filter/search.
- Custom order directions.
- Custom placeholder.
- Multiple select.
- Supports OPTGROUP.
How to use it:
To get started, just include the JavaScript ‘blobselect.min.js’ and style sheet ‘blobselect.min.css’ on the web page.
<link rel="stylesheet" href="blobselect.css"> <script src="blobselect.min.js"></script>
Add the following HTML data attributes to your select box and done.
- data-blobselect-placeholder: placeholder text
- data-blobselect-placeholder: used only for the dropdown listing
- data-blobselect-order-type: “string”, “numeric”, or empty
- data-blobselect-order: ‘asc’ or ‘dec’
- data-blobselect-search: enables live search
- data-watch: forces blob-select to re-check for changes to its element every X milliseconds
<select id="select-demo" data-blobselect-placeholder="Eat Something" data-blobselect-placeholder-option="None of the Above" data-blobselect-order-type="string" data-blobselect-order="asc" > <option value="0"></option> <option value="apples">Apples</option> <option value="bananas">Bananas</option> <option value="pears">Pears</option> <option value="cabbage">Cabbage</option> <option value="carrots">Carrots</option> <option value="lettuce">Lettuce</option> </select>
You can also pass the options in the ‘data-blobselect’ array:
<select id="select-demo" data-blobselect="{placeholder: 'Eat Something', placeholderOption: 'None of the Above', orderType: 'string', order: 'desc'}"> <option value="0"></option> <option value="apples">Apples</option> <option value="bananas">Bananas</option> <option value="pears">Pears</option> <option value="cabbage">Cabbage</option> <option value="carrots">Carrots</option> <option value="lettuce">Lettuce</option> </select>
Changelog:
11/14/2018
- capture clicks on <mark>
06/11/2018
- fix search cursor placement
Don’t use this lib. If you have two select-menu at an one page this lib not working