我有一個輸入欄位和水果串列，可以通過在輸入欄位中輸入字母來過濾。我想使用一個帶有快捷方式選項（例如“pp”）的按鈕，該按鈕將被輸入到輸入中并被過濾掉。這是我的解決方案，但由于我使用的是 keyup 事件，因此它不會過濾掉那些水果。我也嘗試過使用多個事件，如keyup change，但這也不起作用。我究竟做錯了什么？
$(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在這里：https ://jsfiddle.net/w1asL4jo/
uj5u.com熱心網友回復：
不要忘記設定值是不夠的，要onChange()運行，您需要為其觸發事件。你可以用dispatchEvent(new Event('change'));. （參見：MDN WebDocs: dispatchEvent()。）試試這個……
function setInputSeries(elmnt) {
document.getElementById("search").value = elmnt.dataset.series;
document.getElementById("search").dispatchEvent(new Event('change'));
}
在線作業演示：JSFiddle
完整的 SO 演示...
$(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>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/364992.html
標籤：javascript 查询
上一篇：選擇并加入sequelize
下一篇：如何等待所有Promise完成