JavaScript 過濾搜索是一個非常常用的技巧，它可以讓用戶更快地找到他們所需的信息。這種技巧可以用于搜索引擎、商店網(wǎng)站和各種其他類型的應(yīng)用程序中。在本文中，我們將討論如何使用 JavaScript 來實(shí)現(xiàn)過濾搜索。

一個常見的例子是在一個網(wǎng)站上搜索產(chǎn)品。如果你用一個文本框輸入你的搜索條件，網(wǎng)站就會把它傳給 JavaScript 來過濾產(chǎn)品列表，然后你就可以看到所有相關(guān)的產(chǎn)品。在這里，我們使用一個 HTML 文本輸入框，可以將輸入的內(nèi)容傳遞給 JavaScript。

<input type="text" id="searchBox" onkeyup="filter()"/>

在JavaScript 中，我們需要使用這個輸入框的值來過濾列表。我們可以用一個數(shù)組來保存所有的產(chǎn)品信息，如下所示：

const products = [
{name: "MacBook Pro", category: "computer"},
{name: "iPad Pro", category: "tablet"},
{name: "Samsung Galaxy S20", category: "smartphone"},
{name: "Canon EOS R", category: "camera"},
];

接下來，我們需要編寫一個過濾函數(shù)，對產(chǎn)品列表進(jìn)行過濾。這個函數(shù)將使用輸入框的值和每個產(chǎn)品的名稱和類別進(jìn)行比較。如果一個產(chǎn)品的名稱或類別包含搜索關(guān)鍵字，它就能被匹配。我們在控制臺上打印所有匹配的產(chǎn)品：

function filter() {
const keyword = document.getElementById("searchBox").value.toLowerCase();
const matchedProducts = products.filter((product) => {
return product.name.toLowerCase().includes(keyword) || product.category.toLowerCase().includes(keyword);
});
console.log(matchedProducts);
}

現(xiàn)在，當(dāng)我們在文本輸入框中輸入關(guān)鍵字時，控制臺將列出搜索結(jié)果。從結(jié)果中可以看到，只有匹配搜索關(guān)鍵字的產(chǎn)品被顯示出來了：

// 如果搜索關(guān)鍵字為 "pro"
[
{name: "MacBook Pro", category: "computer"},
{name: "iPad Pro", category: "tablet"},
]
// 如果搜索關(guān)鍵字為 "camera"
[
{name: "Canon EOS R", category: "camera"},
]

一旦我們完成了過濾函數(shù)，我們就可以通過將匹配的產(chǎn)品展示給用戶來增強(qiáng)用戶體驗(yàn)。在這里，我們使用一個 HTML 表格來展示匹配的產(chǎn)品列表：

function filter() {
const keyword = document.getElementById("searchBox").value.toLowerCase();
const matchedProducts = products.filter((product) => {
return product.name.toLowerCase().includes(keyword) || product.category.toLowerCase().includes(keyword);
});
const tableBody = document.getElementById("productTable").getElementsByTagName("tbody")[0];
tableBody.innerHTML = "";
matchedProducts.forEach((product) => {
const row = tableBody.insertRow(-1);
const nameCell = row.insertCell(0);
const categoryCell = row.insertCell(1);
nameCell.innerHTML = product.name;
categoryCell.innerHTML = product.category;
});
}

現(xiàn)在，當(dāng)我們在文本輸入框中輸入關(guān)鍵字時，匹配的產(chǎn)品將顯示在表格中。表格的 HTML 代碼如下所示：

<table id="productTable">
<thead>
<tr>
<th>Name</th>
<th>Category</th>
</tr>
</thead>
<tbody></tbody>
</table>

總的來說，JavaScript 過濾搜索是一種非常有用的技術(shù)，可以幫助用戶更快地找到他們所需的信息。使用以上的技巧，你可以實(shí)現(xiàn)不同類型的過濾搜索，在不同的應(yīng)用程序中使用。只需要適當(dāng)?shù)匦薷倪^濾函數(shù)和 HTML 結(jié)構(gòu)。