Select Box with Search Filter

Turn a simple Select box:

ugly-select

Into this:

nice-select

Supported in:

  • IE 8+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+

Download the latest plugin here: Download

The idea
Select2 hides the old select box(inlined “display: none;”) and replicates it with a new custom select box structure. It ads a “s2id_” before the name of your select box ID. All options within the old select box are inherited by the new select box.

Sample usage:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<head>
    <link href="select2.css" rel="stylesheet"/>
    <script src="select2.js"></script>
    <script>
        $(document).ready(function() { $("#education").select2(); });
    </script>
</head>
<body>
    <select id="education">
        <option value="AD">Associates Degree</option>
        ...
        <option value="BD">Bachelors Degree</option>
    </select>
</body>

Commonly used parameters:

placeholder [string] Placeholder for the select element
allowClear [boolean] true or false. Default is false
minimumInputLength [int] Filters 2 string values

Usage:

1
2
3
4
5
$("#education").select2({
    placeholder: "Select an option",
    allowClear: true,
    minimumInputLength: 5
});

Reference Site: http://ivaynberg.github.io/select2/select2-latest.html