Commit 42e1dafc authored by Nitin Jadhav's avatar Nitin Jadhav
Browse files

added search term highlight

parent 12044537
Pipeline #193924 passed with stages
in 4 minutes and 30 seconds
......@@ -27,3 +27,7 @@
height: 3rem;
}
}
.highlight {
background-color: rgb(255, 255, 195);
}
......@@ -3,6 +3,7 @@ import { parseDateFromTimeHtml } from "helpers/date-helpers";
import { stripHtml } from "helpers/helpers";
import { useFetch } from "helpers/useFetch";
import { locations, positionTypes } from "data/jobs-data.json";
import { cloneDeep } from "lodash-es";
/* Custom hook for jobs fetching and filtering. If jobLocation is not provided, assume all job locations */
export function useFetchJobsList(filters, jobLocation) {
......@@ -76,6 +77,9 @@ export function useFetchJobsList(filters, jobLocation) {
newFilteredJobs = newFilteredJobs.filter((job) =>
jobContainsSearchTerm(job, searchTerm.toLowerCase())
);
newFilteredJobs = cloneDeep(newFilteredJobs);
newFilteredJobs = highlightTerm(newFilteredJobs, searchTerm);
}
if (selectedLocations.length) {
......@@ -179,3 +183,23 @@ function jobContainsSearchTerm(job, searchTerm) {
job.$lowercase_field_jobs_duty_station.includes(searchTerm)
);
}
function highlightTerm(jobs, searchTerm) {
debugger;
const termRegEx = new RegExp(searchTerm, "ig");
jobs.forEach((job) => {
job.title = job.title.replaceAll(
termRegEx,
(instance) => `<span class='highlight'>${instance}</span>`
);
job.field_jobs_description = job.field_jobs_description.replaceAll(
termRegEx,
(instance) => `<span class='highlight'>${instance}</span>`
);
job.field_jobs_duty_station = job.field_jobs_duty_station.replaceAll(
termRegEx,
(instance) => `<span class='highlight'>${instance}</span>`
);
});
return jobs;
}
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment