Html Question posted in
Some basic documentation can be found here.

Html – How do i use onkeyup event in bootstrap select element?

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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 the onkeyup Event Listener:

    Employ jQuery to bind the onkeyup event to the input element:

    $(document).ready(function() {
    $(document).on('keyup', '.custome_class .bs-searchbox input', function() {
        // Your code to execute on keyup
    });
});

    Html

    <select class="form-control custome_class ">
               <option>Select</option> 
               <option>Car</option> 
               <option>Bike</option> 
               <option>Scooter</option> 
               <option>Cycle</option> 
               <option>Horse</option> 
            </select>

  2. 0

    <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

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search