Elegant Multi-funtional Select Box Replacement – blob-select

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

Preview:

Elegant Multi-funtional Select Box Replacement – blob-select

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

You Might Be Interested In:


One thought on “Elegant Multi-funtional Select Box Replacement – blob-select

  1. DaoS

    Don’t use this lib. If you have two select-menu at an one page this lib not working

    Reply

Leave a Reply