Search by Keywords

Question

I am a self taught programmer and I am currently working on a job-listing website project. I have a job-listing page with a search function. Now, the user is able to search by job title and I would like to add the option to search by keywords.

HTML

Each job has 6 properties: job-title, job-location, job-type, job-industry and job-keyword. The job-keyword is a list since a job can have a different number of keywords.

<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 for the search by title:

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: What I have tried and I do not think I am very far but still not working

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

Hello ! Can you give us more detail of issue ? Nothings happen or behavior is not what you want ? — Martin Choraine, Aug 05 '19 at 15:59
Can you give us an example of term / keywords not working ? The issue could just be that you forgot a `.toLowerCase()` in the `for` loop, but it could also be an `includes` not behaving as expected. — Nomis, Aug 05 '19 at 16:01

score 3 · Answer 1 · answered Aug 05 '19 at 16:36

3

i think problem with your code is that keywords are not string but array of string so what you need to do is search in keyword array i.e

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

answered Aug 05 '19 at 16:36

Aimal Khan

449
2
9

Thank you Aimai, just tested it and it is working! thank you! – Aug 05 '19 at 19:11

score 0 · Answer 2 · answered Aug 05 '19 at 16:02

I suggest you not to use includes but prefer indexOf. You can find more information here

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

Hi Martin, I read the article, I need a bit more practice because I have difficulties to understand how and when to apply the indexOf method. — , Aug 05 '19 at 19:13

François Huppé · Answer 3 · 2019-08-05T17:12:02.257

Here is a good trick for this kind of front-end filtering. I don't know if it is something you want, because it is not exactly what the OP asks, but this would search in all your fields (title, location, type, date, industry, keywords):

    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>

Salut François, et merci encore! Actually, I do have another search bar which is "location" so I will use a part of your code for that second search bar. What I was just wondering is, how difficult it will be right now to implement a auto-suggestion for the search bar? Like if you type "sal" the auto suggestion is going to be "sales". Thank you! — , Aug 05 '19 at 19:15

Search by Keywords

3 Answers3