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

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/

CodePudding user response：

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>