按文件名和类别搜索

Question

各位开发人员好。我正在创建一个网页来显示文档。我在试着搜索通过"文件名"one_answers"类别"。我有一个下拉菜单用于选择文件类别和一个搜索输入。因此，我创建了两个事件侦听器，一个用于按文件名搜索，另一个用于按文件名搜索按类别搜索。我有很多分类，我想用相同的函数来搜索我所有的分类

我的困难是:我有一个搜索输入，我的两个事件列表使用相同的输入参考(id ="search"。目前我只能按文件名或目录

搜索

Here is my HTML code:

<section id="top1">
<div class="top-left">
<span><i class="mdi mdi-cloud-search"></i></span>
<div class="dropDown">
<select id="selectbox1" onchange="selectOption(this.value)">
<option value="file_name" class="file_name">File Name</option>
<option value="probation" class="probation">Probation 
Review</option>
<option value="signed" class="signed">Signed Policies</option>
<option value="sick" class="sick">Sick Notes</option>
<option value="family" class="family">Family Responsibility Leave</option>
<option value="private" class="private">Private</option>
<option value="warnings" class="warnings">Warnings</option>
<option value="assets" class="assets">Assets</option>
<option value="certificates" class="certificates">Certificates</option>
</select>
</div>
<div class="search">
<input id="search" type="text" placeholder="search" >
</div>
</div>
<div class="upload">
<button>Upload Files</button>
</div>
</section>
<!-- #1documents row -->
<section class="reuse">
<h3>Probation Reviews</h3>
<div class="documents first-section" id="probation-review">

</div>
</section>
<!-- #2documents row -->
<section class="reuse ">
<h3>Signed Policies</h3>
<div class="documents first-section" id="signed-policies">
</div>
</section>
<!-- #3documents row -->
<section class="reuse">
<h3>Sick Notes</h3>
<div class="documents first-section" id="sick-notes">
</div>
</section>

我在js文件中为我的文档创建了一个数组并循环显示它们。下面是代码:

/*Sick Notes*/
const sick_note_arry = [
{ path: "https://documentcloud.adobe.com/view-sdk-demo/PDFs/Bodea Brochure.pdf", title: "Clinics", sub_title: "1 Jan 2022 10:15" },
{ path: "assets/textFiles/sample3.txt", title: "Doctors", sub_title: "1 Jan 2022 10:15" },
{ path: "https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210101201653/PDF.pdf", title: "Dr Appointment", sub_title: "1 Jan 2022 10:15" },
// "assets/wordDocs/TeamMeeting.docx",
]
const mainCard = document.getElementById("sick-notes");
for (var i = 0; i < sick_note_arry.length; i++) {
const newCard = document.createElement("div");
newCard.classList.add("myDocs");
mainCard.classList.add("first-section");
cardHtml = `
<div class="innerDoc">
<iframe src="${sick_note_arry[i].path}" alt="" width='200px' height='200px' ></iframe>
<h5>${sick_note_arry[i].title}</h5>
<h6>${sick_note_arry[i].sub_title}</h6>
</div>
`;
mainCard.appendChild(newCard);
newCard.innerHTML = cardHtml;
}
/*End Of Sick Notes*/

这是我的事件监听器，用于按文件名搜索。

const get_input =  document.getElementById("search");
const inner_div = document.getElementsByClassName("myDocs");
get_input.addEventListener("keyup", (event)=>{
const valueKey = event.target.value;
const search_items =  document.querySelectorAll(".myDocs h5");
for (var i = 0; i < search_items.length; i++) {
const myElements = search_items[i].innerHTML;

if (myElements.trim().toLowerCase().indexOf(valueKey.trim().toLowerCase()) > -1) {
inner_div[i].style.display = "block";
} else {
inner_div[i].style.display = "none";
}
}
})

下面是按类别搜索的事件:

const inner_diver = document.querySelectorAll("#probation-review .myDocs");
get_input.addEventListener("keyup", (e) => {
const valueKey = e.target.value;
for (var i = 0; i < inner_diver.length; i++) {
const myElements = inner_diver[i].innerHTML;
if (myElements.trim().toLowerCase().indexOf(valueKey.trim().toLowerCase()) > -1) {
inner_diver[i].style.display = "block";
} else {
inner_diver[i].style.display = "none";
}

}})

我期望的结果是有一个函数搜索所有类别。我是一个初学者，所以我希望我的问题是明确的。如果解决办法能。我会很感激javascript或jquery。提前谢谢你。

Answer 1

你可以试试:

let selectCategory = document.querySelector('#selectbox1');
let divsCategory = document.querySelectorAll('.documents');
selectCategory.addEventListener('change', e => {
for(let div of divsCategory) {
if(div.Id == selectCategory.value || !selectCategory.value) {
div.style.display = "block";
} else {
div.style.display = "none";
}
}
});

不要忘记添加一个空的option，它将允许您取消选择option，从而显示所有类别。

如果你对这段代码有任何疑问，告诉我;)