[英]Search by Keywords
我是一名自学成才的程序员,目前正在从事工作清单网站项目。 我有一个带有搜索功能的工作清单页面。 现在,用户可以按职位搜索,并且我想添加按关键字搜索的选项。
的HTML
每个作业都有6个属性:作业标题,作业位置,作业类型,作业行业和作业关键字。 作业关键字是一个列表,因为作业可以具有不同数量的关键字。
<div class="job-listing">
<div class="container">
<div class="job-number">
<h2>We Found <span id="number-jobs-total" class="text-secondary">214</span> Offers For <span>You</span> </h2>
</div>
<ul class="job-board">
<li class="job job-1">
<div class="job-title">
<h2>Process Engineer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/19/2019</p>
</div>
<div class="job-industry">
<p>Engineering</p>
</div>
<ul class="job-keywords">
<li>Engineering</li>
<li>Science</li>
</ul>
</li>
<li class="job job-2">
<div class="job-title">
<h2>Chief Financial Officier</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Full-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-3">
<div class="job-title">
<h2>Assistant CEO</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
<li class="job job-4">
<div class="job-title">
<h2>Front-End Developer</h2>
</div>
<div class="job-location">
<p>Location: Naypyitaw</p>
</div>
<div class="job-type">
<p>Type: Part-Time</p>
</div>
<div class="job-date">
<p>Published on 07/18/2019</p>
</div>
</li>
</ul>
<nav class="pagination-container">
<ul class="pagination">
<li><a href="javascript:void(0)">Previous</a></li>
<li><a href="javascript:void(0)">Next</a></li>
</ul>
</nav>
</div>
</div>
JS按标题搜索:
const search= document.querySelector(".skills");
const jobs = Array.from(document.querySelector(".job-board").children);
const filterJobs = term => {
jobs.filter(job =>{
const title = job.querySelector(".job-title").textContent.toLowerCase();
if(title.includes(term.toLowerCase()) || totalKeywords.includes(term.toLowerCase()) ){
job.style.display = "list-item";
} else{
job.style.display = "none";
}
});
};
search.addEventListener("keyup", e =>{
filterJobs(e.currentTarget.value.trim());
});
JS:我已经尝试过了,但我认为我还没有走很远,但是仍然无法正常工作
const search= document.querySelector(".skills");
const jobs = Array.from(document.querySelector(".job-board").children);
const filterJobs = term => {
jobs.filter(job =>{
const title = job.querySelector(".job-title").textContent.toLowerCase();
const keyword = job.querySelectorAll(".job-keywords li");
totalKeywords = [];
for(var i = 0 ; i < keyword.length ; i++){
totalKeywords.push(keyword[i].textContent);
}
console.log(totalKeywords);
if(title.includes(term.toLowerCase()) || totalKeywords.includes(term.toLowerCase()) ){
job.style.display = "list-item";
} else{
job.style.display = "none";
}
});
};
search.addEventListener("keyup", e =>{
filterJobs(e.currentTarget.value.trim());
});
我认为您的代码的问题是关键字不是字符串而是字符串数组,因此您需要在关键字数组中进行搜索,即
let inKeywords = totalKeywords.some(keyword => keyword.toLowerCase().includes(term.toLowerCase()));
if(title.includes(term.toLowerCase()) || inKeywords ){
job.style.display = "list-item";
} else{
job.style.display = "none";
}
我建议您不要使用includes
而是使用indexOf
。 您可以在这里找到更多信息
const search = document.querySelector('.skills');
const jobs = Array.from(document.querySelector('.job-board').children);
const filterJobs = term => {
jobs.filter(job => {
const title = job.querySelector('.job-title').textContent.toLowerCase();
const keyword = job.querySelectorAll('.job-keywords li');
const totalKeywords = [];
for (var i = 0; i < keyword.length; i++) {
totalKeywords.push(keyword[i].textContent);
}
console.log(totalKeywords);
if (title.includes(term.toLowerCase()) || totalKeywords.indexOf(term.toLowerCase()) > -1) {
job.style.display = 'list-item';
} else {
job.style.display = 'none';
}
});
};
search.addEventListener('keyup', e => {
filterJobs(e.currentTarget.value.trim());
});
这是此类前端过滤的一个好技巧。 我不知道这是否是您想要的东西,因为这并不是OP的要求,但这会在您的所有字段(标题,位置,类型,日期,行业,关键字)中进行搜索:
const search= document.querySelector(".skills"); const jobs = Array.from(document.querySelector(".job-board").children); const filterJobs = term => { jobs.filter(job =>{ jobText = job.textContent || job.innerText || ""; // strip html tags from the job element and keeps only text jobText = jobText.toLowerCase(); if(jobText.indexOf(term.toLowerCase()) > -1){ job.style.display = "list-item"; } else{ job.style.display = "none"; } }); }; search.addEventListener("keyup", e =>{ filterJobs(e.currentTarget.value.trim()); });
<input type="text" class="skills" placeholder="search"> <div class="job-listing"> <div class="container"> <div class="job-number"> <h2>We Found <span id="number-jobs-total" class="text-secondary">214</span> Offers For <span>You</span> </h2> </div> <ul class="job-board"> <li class="job job-1"> <div class="job-title"> <h2>Process Engineer</h2> </div> <div class="job-location"> <p>Location: Naypyitaw</p> </div> <div class="job-type"> <p>Type: Full-Time</p> </div> <div class="job-date"> <p>Published on 07/19/2019</p> </div> <div class="job-industry"> <p>Engineering</p> </div> <ul class="job-keywords"> <li>Engineering</li> <li>Science</li> </ul> </li> <li class="job job-2"> <div class="job-title"> <h2>Chief Financial Officier</h2> </div> <div class="job-location"> <p>Location: Naypyitaw</p> </div> <div class="job-type"> <p>Type: Full-Time</p> </div> <div class="job-date"> <p>Published on 07/18/2019</p> </div> </li> <li class="job job-3"> <div class="job-title"> <h2>Assistant CEO</h2> </div> <div class="job-location"> <p>Location: Naypyitaw</p> </div> <div class="job-type"> <p>Type: Part-Time</p> </div> <div class="job-date"> <p>Published on 07/18/2019</p> </div> </li> <li class="job job-4"> <div class="job-title"> <h2>Front-End Developer</h2> </div> <div class="job-location"> <p>Location: Naypyitaw</p> </div> <div class="job-type"> <p>Type: Part-Time</p> </div> <div class="job-date"> <p>Published on 07/18/2019</p> </div> </li> </ul> <nav class="pagination-container"> <ul class="pagination"> <li><a href="javascript:void(0)">Previous</a></li> <li><a href="javascript:void(0)">Next</a></li> </ul> </nav> </div> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.