我有一個使用 JavaScript 過濾 html 串列的搜索功能。
默認情況下，所有串列項都是隱藏的，但如果用戶輸入了正確的關鍵字，則會顯示。
目前，搜索只回傳與輸入完全匹配的專案。
如果遺漏了一個詞、添加了額外的詞或詞的順序不同，則不會顯示結果。
我希望用戶能夠搜索多個單詞，如果一個或多個單詞匹配，就會顯示結果。
用戶輸入單詞的順序無關緊要。
例如，搜索“VAUXHALL CORSA DIESEL”將回傳串列項“BLUE VAUXHALL CORSA 1.6L DIESEL”。
搜索“DIESEL VAUXHALL”也會回傳相同的串列項。
我認為這可以通過合并 .split(“ ”) 來完成，但是我不確定在代碼中的哪個位置需要它。
我嘗試了一些配置無濟于事。
我對編碼很陌生！
我已經添加了當前腳本。
window.addEventListener("load", () => {
var filter = document.getElementById("filter"),
list = document.querySelectorAll(".list li");
filter.onkeyup = () => {
let search = filter.value.toLowerCase();
for (let i of list) {
let item = i.innerHTML.toLowerCase();
if (item.indexOf(search) == -1) {
i.classList.add("hide");
} else {
i.classList.remove("hide");
if (filter.value.length == 0) {
i.classList.add("hide");
}
}
}
};
});uj5u.com熱心網友回復：
您可以split使用空白空間進行搜索。
例如
let searchKeywords = filter.value.toLowerCase().split(" ");
并使用every陣列函式檢查contains搜索中的每個關鍵字是否存在該專案。
完整的代碼示例。
window.addEventListener("load", () => {
var filter = document.getElementById("filter"),
list = document.querySelectorAll(".list li");
filter.onkeyup = () => {
let searchKeywords = filter.value.toLowerCase().split(" ");
for (let i of list) {
let item = i.innerHTML.toLowerCase();
if (searchKeywords.every(word => item.includes(word))) {
i.classList.add("hide");
} else {
i.classList.remove("hide");
if (filter.value.length == 0) {
i.classList.add("hide");
}
}
}
};
});
uj5u.com熱心網友回復：
我猜到了一些 HTML
這可以滿足您的要求，.every并且.includes
我也使用輸入代替，因為用戶可以粘貼到欄位中最后我簡化了隱藏
window.addEventListener("load", () => {
const list = document.querySelector(".list")
filter = document.getElementById("filter"),
lis = [...list.querySelectorAll("li")]; // spread to use map and sort
filter.addEventListener("input", () => {
let search = filter.value.toLowerCase().split(/\W /);
lis.forEach(li => {
if (search.length === 0) {
li.hidden = true;
li.dataset.rank = 0;
return
}
let items = li.textContent.toLowerCase().split(/\W /)
li.hidden = !search.every(flt => items.includes(flt))
li.dataset.rank = search.filter(flt => items.includes(flt)); // how many
});
lis.sort((a, b) => a.dataset.rank - b.dataset.rank).forEach(li => list.append(li))
});
});For example, searching ‘VAUXHALL CORSA DIESEL’ would return the list item, Searching ‘DIESEL VAUXHALL’ would also return the same list item.
<hr/>
<input type="text" id="filter" />
<ul class="list">
<li>BLUE VAUXHALL CORSA 1.6L DIESEL</li>
<li>RED DIESEL</li>
<li>GREEN VAUXHALL ASTRA 1.6L PETROL</li>
<li>RED VAUXHALL CORSA 1.6L DIESEL</li>
<li>RED VAUXHALL CORSA 1.6L PETROL</li>
<li>RED VAUXHALL ASTRA 1.6L PETROL</li>
<li>RED VAUXHALL ASTRA 1.6L DIESEL</li>
</ul>轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/508384.html
標籤：javascript html 搜索 分裂 html 列表
上一篇：圓形剪輯路徑