Filter Textbox is Not Filtering When Setting Value with `el.value =…`

November 24, 2021

I have a input field and list of fruits, which can be filtered by typing letters into the input field. I want to use a button with shortcuts option (for example "pp") that will be typed into input and also filtered out. This is the solution I have but since I’m using keyup event, it doesn’t filter those fruits out. I’ve also tried using multiple events like keyup change, but that doesn’t work either. What am I doing wrong?

    $(document).ready(function () {
        
        $('#search').on('keyup change', function () {
            this.value = this.value.toString().toLowerCase();
            if (this.value == "") {
                $('.fruit').show();
            } else {
                let elems = $('.fruit[data-name*="'+this.value+'"]');
                $('.fruit').not(elems).hide();
                elems.show();
            }
        });
        
    });
    
    function setInputSeries(elmnt) {
        document.getElementById("search").value = elmnt.dataset.series;
    }

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control search input-lg" id="search" style="text-transform: lowercase;" type="text">
    <button onclick="setInputSeries(this);" data-series="pp">Filter pp</button>
    
    <div id="list">
      <p class="fruit" data-name="apple">Apple</p>
      <p class="fruit" data-name="apple2">Apple2</p>
      <p class="fruit" data-name="aple">Aple</p>
      <p class="fruit" data-name="orange">Orange</p>
      <p class="fruit" data-name="banana">Banana</p>
      <p class="fruit" data-name="mango">Mango</p>
      <p class="fruit" data-name="lemon">Lemon</p>
      <p class="fruit" data-name="apple3">Apple3</p>
    </div>

JSFiddle here: https://jsfiddle.net/w1asL4jo/

>Solution :

Don’t forget that setting the value is not enough, to have onChange() run, you need to trigger the event for it. You can do that with dispatchEvent(new Event('change'));. (See: MDN WebDocs: dispatchEvent().) Try this…

function setInputSeries(elmnt) {
    document.getElementById("search").value = elmnt.dataset.series;
    document.getElementById("search").dispatchEvent(new Event('change'));
}

Working Demo Online: JSFiddle

Full SO demo…

$(document).ready(function () {
    
    $('#search').on('keyup change', function () {
        this.value = this.value.toString().toLowerCase();
        if (this.value == "") {
            $('.fruit').show();
        } else {
            let elems = $('.fruit[data-name*="'+this.value+'"]');
            $('.fruit').not(elems).hide();
            elems.show();
        }
    });
    
});

function setInputSeries(elmnt) {
    document.getElementById("search").value = elmnt.dataset.series;
  document.getElementById("search").dispatchEvent(new Event('change'));
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input class="form-control search input-lg" id="search" style="text-transform: lowercase;" type="text">
    <button onclick="setInputSeries(this);" data-series="pp">Filter pp</button>
    
    <div id="list">
      <p class="fruit" data-name="apple">Apple</p>
      <p class="fruit" data-name="apple2">Apple2</p>
      <p class="fruit" data-name="aple">Aple</p>
      <p class="fruit" data-name="orange">Orange</p>
      <p class="fruit" data-name="banana">Banana</p>
      <p class="fruit" data-name="mango">Mango</p>
      <p class="fruit" data-name="lemon">Lemon</p>
      <p class="fruit" data-name="apple3">Apple3</p>
    </div>