我正在使用 javascriptincludes()方法來過濾一個看起來像這樣的物件陣列；
const names = [
{name: 'Rose-mary Thompson', age: 30},
{name: 'Rose mary Samuel', age: 30},
{name: 'John-Doe Jackson', age: 30},
{name: 'John Doe Philips', age: 30},
]
如果我搜索“Rose mary”，我希望結果也包括“Rose-mary”。我不希望用戶必須在帶有 - 的名稱出現在搜索結果中之前輸入連字符（-）。
這是我的代碼；
let searchQuery = 'Rose mary'
let filteredResults = []
const searchItems = () => {
if (searchQuery.length > 1) {
const results = names.filter((name) => {
return name.name.toLowerCase().includes(searchQuery.toLowerCase());
});
filteredResults = results
}
}
請問我該如何實作？
uj5u.com熱心網友回復：
includes只會找到完全匹配的。由于您已經在搜索時調整了每個字串，因此您可以“規范化”兩者searchQuery并轉換name為小寫字母并-轉換為空格：
const searchItems = () => {
if (searchQuery.length > 1) {
const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
const results = names.filter((name) => {
return name.name
.toLowerCase()
.replace(/-/g, " ")
.includes(adjustedQuery);
});
filteredResults = results;
}
};
顯示代碼片段
const names = [
{ name: "Rose-mary Thompson", age: 30 },
{ name: "Rose mary Samuel", age: 30 },
{ name: "John-Doe Jackson", age: 30 },
{ name: "John Doe Philips", age: 30 },
];
let searchQuery = "Rose mary";
let filteredResults = [];
const searchItems = () => {
if (searchQuery.length > 1) {
const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
const results = names.filter((name) => {
return name.name
.toLowerCase()
.replace(/-/g, " ")
.includes(adjustedQuery);
});
filteredResults = results;
}
};
searchItems();
console.log(filteredResults);旁注：我還將為函式制作names和searchQuery 引數，并讓它回傳結果：
顯示代碼片段
const names = [
{ name: "Rose-mary Thompson", age: 30 },
{ name: "Rose mary Samuel", age: 30 },
{ name: "John-Doe Jackson", age: 30 },
{ name: "John Doe Philips", age: 30 },
];
const searchItems = (names, searchQuery) => {
if (searchQuery.length > 1) {
const adjustedQuery = searchQuery.toLowerCase().replace(/-/g, " ");
const results = names.filter((name) => {
return name.name
.toLowerCase()
.replace(/-/g, " ")
.includes(adjustedQuery);
});
return results;
}
return names; // Or whatever you want when there's no query
};
console.log(searchItems(names, "Rose mary"));轉載請註明出處，本文鏈接：https://www.uj5u.com/net/482155.html
標籤：javascript 反应 反应式 搜索