<html>
<head>
<title>How to create HTML select box with searching support using jQuery</title>
<link href=”select2.css” rel=”stylesheet”/>
<script src=”http://code.jquery.com/jquery-1.8.0.min.js”></script>
<script src=”select2-2.js”></script>
<script>
$(document).ready(function() {
$(“#states”).select2();
});
</script>
</head>
<body>
<select style=”width:300px” id=”states”>
<optgroup label=”Alaskan/Hawaiian Time Zone”>
<option value=”AK”>Alaska</option>
<option value=”HI”>Hawaii</option>
</optgroup>
<optgroup label=”Pacific Time Zone”>
<option value=”CA”>California</option>
<option value=”NV”>Nevada</option>
<option value=”OR”>Oregon</option>
<option value=”WA”>Washington</option>
</optgroup>
<optgroup label=”Mountain Time Zone”>
<option value=”AZ”>Arizona</option>
<option value=”CO”>Colorado</option>
<option value=”ID”>Idaho</option>
<option value=”MT”>Montana</option><option value=”NE”>Nebraska</option>
<option value=”NM”>New Mexico</option>
<option value=”ND”>North Dakota</option>
<option value=”UT”>Utah</option>
<option value=”WY”>Wyoming</option>
</optgroup>
<optgroup label=”Central Time Zone”>
<option value=”AL”>Alabama</option>
<option value=”AR”>Arkansas</option>
<option value=”SD”>South Dakota</option>
<option value=”TX”>Texas</option>
<option value=”TN”>Tennessee</option>
<option value=”WI”>Wisconsin</option>
</optgroup>
<optgroup label=”Eastern Time Zone”>
<option value=”CT”>Connecticut</option>
<option value=”MI”>Michigan</option>
<option value=”PA”>Pennsylvania</option>
<option value=”RI”>Rhode Island</option>
<option value=”SC”>South Carolina</option>
<option value=”VT”>Vermont</option>
<option value=”VA”>Virginia</option>
<option value=”WV”>West Virginia</option>
</optgroup>
</select>
</body>
</html>
Note:
Download select2.js, select2.css files from below location
https://github.com/ivaynberg/select2/blob/master/select2.js
https://github.com/ivaynberg/select2/blob/master/select2.css
