Tengo un campo de entrada y una lista de frutas, que se pueden filtrar escribiendo letras en el campo de entrada. Quiero usar un botón con la opción de accesos directos (por ejemplo, "pp") que se escribirá en la entrada y también se filtrará. Esta es la solución que tengo, pero como estoy usando el evento keyup, no filtra esas frutas. También intenté usar múltiples eventos como keyup change , pero eso tampoco funciona. ¿Qué estoy haciendo mal?
$(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 aquí: https://jsfiddle.net/w1asL4jo/
No olvide que establecer el valor no es suficiente, para que se onChange() , debe activar el evento. Puede hacerlo con dispatchEvent(new Event('change')); . (Consulte: MDN WebDocs: dispatchEvent() .) Pruebe esto...
function setInputSeries(elmnt) { document.getElementById("search").value = elmnt.dataset.series; document.getElementById("search").dispatchEvent(new Event('change')); }Demostración de trabajo en línea: JSFiddle
Demostración SO completa...
$(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>