Live Filter For Select Box - jQuery sel_filter.js

Live Filter For Select Box - jQuery sel_filter.js

The jQuery sel_filter.js plugin adds an inline search field to the select box that allows the user to filter select options in real-time.

1. Load the jquery.sel_filter.js script after the latest version of jQuery JavaScript library (slim build).

<script src="" 
<script src="jquery.sel_filter.js"></script>

2. Call the function on the regular select element.

<select id="demo">
  <option>Germany ABUS</option>
  <option>China AEE</option>
  <option>Taiwan Aiptek</option>
  <option>France Alcatel</option>
  <option>Switzerland Alpa</option>
  <option>United States Apple</option>
  <option>United States Arecont Vision</option>

3. The example CSS to style & position the live search/filter input. Feel free to customize the search input field with your own CSS styles.

.sel_filter {
  width: 16px;
  background: url('jquery.sel_filter.png') 100% 50% no-repeat;
  opacity: 0.4;
  filter: alpha(opacity=40);
.sel_filter_tb {
  display: inline;
  padding: 0px;
  border-collapse: collapse;
.sel_filter_tb td { padding: 0; }

4. Available plugin options with default values.

  // width of the search field
  slide_width : 50,
  // min number of options
  min_options: 10,
  // crops options
  crop: true

This awesome jQuery plugin is developed by zolll23. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 18.05.2018
  • Source