I am trying to make a search box which shows suggestions as soon as user starts typing in the search bar. Using select2 it shows suggestions by default even when user does not type anything in the search box. Since I have large no. of options I don't want them to display all by default. It should be displayed only when match with the user typing in the search box.
<html>
<head>
<title>Using Select2</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<!-- Select2 CSS -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
</head>
<body>
<div class="jumbotron">
<div class="container bg-danger">
<div class="col-md-6">
<label>Multiple Select2</label>
<select id="multiple" class="js-states form-control" multiple>
<option>Java</option>
<option>Javascript</option>
<option>PHP</option>
<option>Visual Basic</option>
</select>
</div>
</div>
</div>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Select2 -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<script>
$("#multiple").select2({
placeholder: "Select a programming language",
allowClear: true
});
</script>
</body>
</html>You can set the option minimumInputLength of the select2 configuration:
$("#multiple").select2({
placeholder: "Select a programming language",
allowClear: true,
minimumInputLength: 2
});
Now options will only appear after the user has typed at least 2 characters.