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/
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>