This bootstrap code filters but i would like to trigger onkeyup
event and use it to run a function. As i type in the search input i would like it to trigger a myFunction()
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.6-rc.0/js/select2.min.js"></script>
<div class="container">
<div class="row">
<form class="col-md-4">
<label>Select</label>
<select class="form-control select2 ">
<option>Select</option>
<option>Car</option>
<option>Bike</option>
<option>Scooter</option>
<option>Cycle</option>
<option>Horse</option>
</select>
</form>
</div>
</div>
<script>
$('.select2').select2();
</script>
2
Answers
I finaly figured it out. Bootstrap Select doesn't directly expose an onkeyup event for its live search input box. To achieve this functionality, you'll need to target the appropriate element and attach the event listener yourself.
1. Identify the Input Element: The live search input box bears the class
bs-searchbox input
. Use this selector to target it for event handling. 2. Attach theonkeyup
Event Listener:Employ jQuery to bind the
onkeyup
event to the input element:Html
<input matInput type="text" (keyup.enter)="your function()" autocomplete="off" >
Use like this wherever you want to use.
keyup.enter i used in my project just like this.
Thank you