selectify's Introduction

Selectify

Selectify is a jQuery-based replacement for select boxes. It supports searching, remote data sets.

Install

$ npm install @mokech/selectify

Use Casses

select box with checkbox for each option
search in select options

How To Use

Add css and js file in your project
Add "selectify" class to select tag
Enable/Disable search box via "search" option in config object (dafault is true)
Set your message through "language" option :
- not_found : not found item
- placeholder : search box placeholder
Add "data-count" attribute for displaying count of item after option text
If user can select multiple options add "multiple" to select tag and displays checkbox (If user is limited to select one option, selectify displays radio button)

Example #1

<select id="unique-select" class="selectify">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<script>
    $('#unique-select').selectify();
</script>

Example #2

<select id="unique-select" class="selectify" multiple>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
</select>

<script>
    $('#unique-select').selectify({
        search: false,
        language: {
            not_found: 'There is no item',
            placeholder: 'Search options'
        }
    });
</script>

Example #3

<select id="unique-select" class="selectify" multiple>
    <option data-count="34">1</option>
    <option data-count="69">2</option>
    <option data-count="58">3</option>
    <option data-count="72">4</option>
</select>

<script>
    $('#unique-select').selectify({
        search: true,
        language: {
            not_found: 'There is no item',
            placeholder: 'Search options'
        }
    });
</script>

Recommend Projects