我正在尝试重新创建 Outlook 的搜索功能。我的整个数据集包含在以下接口中:
export interface Folder{
id: string | null;
name: string;
folders: Folder[] | null;
emails: Email[]
}
export interface Email {
id : string;
conversation_id: string;
from: Contact;
to: Contact[];
cc: Contact[];
bcc: Contact[];
subject: string;
body: string;
body_preview: string;
has_attachments: boolean;
file_attachments: FileAttachment[];
received_date: Date
}
export interface Contact
{
email_address : number;
name : string | null;
}
export interface FileAttachment
{
id: string;
file_name: string;
content_type: string;
content_bytes: string;
}
如您所见,它是一个具有多层的复杂对象。我有以下 v-text-field,我将使用它来搜索嵌套对象中的字符串:
<v-text-field
v-model="search"
append-inner-icon="mdi-magnify"
label="Dynamic Search"
density="compact"
variant="outlined"
clearable
rounded
hide-details
single-line
flat
color="primaryDarken4"/>
我更关心电子邮件数组,因为这是目前我在屏幕上显示的唯一内容。我想知道如何对此创建过滤器。老实说,我什至不知道从哪里开始,很挣扎。我应该递归地执行此操作(如果可能),还是应该手动循环每个节点以查找匹配项,如果是,则使用 filter() 或其他东西?基本上,无论搜索框中出现什么文本,如果该电子邮件对象中包含该数据,那么都应该保留它。任何帮助将不胜感激。
这个功能会有帮助
function searchForEmails(folder: Folder, searchTerm: string): Email[] {
const searchTermLwCase = searchTerm.toLowerCase();
// email filter by search term
const emailsFiltered = folder.emails.filter(emailData =>
emailData.subject.toLowerCase().includes(searchTermLwCase) ||
emailData.body.toLowerCase().includes(searchTermLwCase) ||
emailData.body_preview.toLowerCase().includes(searchTermLwCase) ||
emailData.from.name?.toLowerCase().includes(searchTermLwCase) ||
emailData.to.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase)) ||
emailData.cc.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase)) ||
emailData.bcc.some(contact => contact.name?.toLowerCase().includes(searchTermLwCase))
);
// searching subfolder recursively
if (folder.folders) {
for (const subfolder of folder.folders) {
emailsFiltered.push(...searchEmails(subfolder, searchTerm));
}
}
return emailsFiltered;
}