Press "Enter" to skip to content

A Simple Searchable Select Dropdown Plugin | jQuery Select Search

Simple jQuery search on selection options plugin for your website. Next, there is a checkbox replacement plugin that refines and beautifies the original selection element with custom styles and makes the options filterable using a search field.

How to make use of it:

1. Add jQuery JavaScript library and the Select Search plugin’s files to the HTML web page.

<link rel="stylesheet" href="/path/to/src/style.css" />
<script src="/path/to/cdn/jquery.min.js"></script>
<script src="/path/to/src/index.js"></script>

2. Wrap the common choice component right into a container aspect.

<div class="select">
  <select name="select" id="select">
    <option value="" selected>Choose option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    ...
  </select>
</div>

3. Add a dropdown indicator to the select box.

<div class="select">
  <i class="ti-angle-down"></i>
  <select name="select" id="select">
    <option value="" selected>Choose option</option>
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
    ...
  </select>
</div>

4. Attach the function jselect_search to the top container.

$('.select').jselect_search({
  // options here
});

5. Define the placeholder text for the search field.

$('.select').jselect_search({
  placeholder : 'Search here'
});

6. Disable the search field.

$('.select').jselect_search({
  searchable : false
});

7. Determine whether or not or to not enable customized choices when there aren’t matched options.

$('.select').jselect_search({
  fillable : true
});

8. Trigger callback capabilities once you scroll to the top and bottom of the select box.

$('.select').jselect_search({
  on_top_edge : function(){
    if( parseInt( $('#state').attr('data-pagination') ) > 1 ){
      $('#state').attr('data-pagination',parseInt( $('#state').attr('data-pagination') )-1);
    }
  },
  on_bottom_edge : function(){
    if( parseInt( $('#state').attr('data-pagination') ) >= 1 ){
      $('#state').attr('data-pagination',parseInt( $('#state').attr('data-pagination') )+1);
    }
  }
});

9. Execute a callback function when the option modifications.

$('.select').jselect_search({
  on_change : function(){
    alert();
  }
});

10. Execute a callback function when the dropdown is activated.

$('.select').jselect_search({
  on_active : function(){
    // do something
  }
});

11. Execute a callback function once you click on the Clear button.

$('.select').jselect_search({
  on_clear : function(){
    // do something
  }
});

12. Execute a callback function after creation.

$('.select').jselect_search({
  on_created : function(){
    // do something
  }
});

13. Clear siblings after an option is selected.

$('.select').jselect_search({
  on_clear_reflect : ['#select1', '#select2']
});

14. Don’t update the select text upon efficiently click on objects.

$('.select').jselect_search({
  disable_text_update : false
});

Tiny Select Box Replacement Plugin, Select Search Plugin/Github


See Demo And Download

Official Website(mejuliver): Click Here

This superior jQuery/javascript plugin is developed by mejuliver. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.