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

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

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

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

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

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

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);
}

現在，當我們在文本輸入框中輸入關鍵字時，控制臺將列出搜索結果。從結果中可以看到，只有匹配搜索關鍵字的產品被顯示出來了：

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

一旦我們完成了過濾函數，我們就可以通過將匹配的產品展示給用戶來增強用戶體驗。在這里，我們使用一個 HTML 表格來展示匹配的產品列表：

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;
});
}

現在，當我們在文本輸入框中輸入關鍵字時，匹配的產品將顯示在表格中。表格的 HTML 代碼如下所示：

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

總的來說，JavaScript 過濾搜索是一種非常有用的技術，可以幫助用戶更快地找到他們所需的信息。使用以上的技巧，你可以實現不同類型的過濾搜索，在不同的應用程序中使用。只需要適當地修改過濾函數和 HTML 結構。