How to Use Select 2 JS
Select2 gives you a customizable select box with support for searching, tagging, remote data sets, infinite scrolling, and many other highly used options.
Include the necessary CSS and JavaScript files in your HTML file. Make sure to include jQuery before Select2.
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Include Select2 CSS -->
<link href="path/to/select2.min.css" rel="stylesheet" />
<!-- Include Select2 JS -->
<script src="path/to/select2.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select2 Example</title>
<!-- Include jQuery -->
<script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
<!-- Include Select2 CSS -->
<link href="path/to/select2.min.css" rel="stylesheet" />
<!-- Include Select2 JS -->
<script src="path/to/select2.min.js"></script>
</head>
<body>
<select class="js-example-basic-single" name="state">
<option value="AL">Alabama</option>
<!-- Add your options here -->
</select>
<script>
$(document).ready(function() {
$('.js-example-basic-single').select2();
});
</script>
</body>
</html>