How to trigger search input event using a button click

Question

I want to fire input's on.input event if value is changed not by typing
Type something inside the input and then click the button

$('.inpsearch').on('input', function(){
    let a = $(this).val();
  console.log(a);
});

$('button').on('click', function(){
    $('.inpsearch').val('');
  // console.log expected here
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='search' class='inpsearch'>
<button>CLICK</button>

score 4 · Accepted Answer · answered Jun 21 '20 at 15:26

You could either trigger the input event as in my snippet or separate that functionality into a function and call it.

$('.inpsearch').on('input', function(){
    let a = $(this).val();
  console.log(a);
});

$('button').on('click', function(){
    $('.inpsearch').val('');
    $('.inpsearch').trigger('input');
  // console.log expected here
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='search' class='inpsearch'>
<button>CLICK</button>

it works thanks. My logic was something like `$('.inpsearch').input()` — qadenza, Jun 21 '20 at 15:30

score 0 · Answer 2 · answered Jun 21 '20 at 16:55

Unfortunately the input event is relatively new and only available to modern browsers (IE9+), verify compatibility

Here is the really good described answer about events.

My suggestion is to use keyup event instead of input event, Much like keydown, it triggers whenever the user releases a key, i have also implemented in your example:

$('.inpsearch').on('keyup', function(){
    let a = $(this).val();
    console.log(a);
});

$('button').on('click', function(){
    $('.inpsearch').val('');
    $('.inpsearch').trigger('keyup');
    // console.log expected here
 });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type='search' class='inpsearch'>
<button>CLICK</button>

Note that keydown, keypress and keyup events carry with them information about the modifier keys Ctrl, Shift and Alt in the properties ctrlKey, shiftKey and altKey respectively and input event will not.

How to trigger search input event using a button click

2 Answers2