• Below is an example of a JavaScript array that contains objects, which we will define:

const jobLists = [
  {
    pos: "Database Administrator",
    loc: "Da Nang City",
    typeCon: "Fulltime",
    link: "https://flagtick.com/career/dba/",
  },
  {
    pos: "Software Developer",
    loc: "Hanoi",
    typeCon: "Fulltime",
    link: "https://flagtick.com/career/dev/",
  },
  {
    pos: "Marketing Manager",
    loc: "Ho Chi Minh City",
    typeCon: "Fulltime",
    link: "https://flagtick.com/career/marketing/",
  },
];

» HTML template

<input class="job-search" type="text" placeholder="e.g. engineer, danang">

• Take advantage of using `filter()` and `addEventListener()` to modify javascript code to filter the jobs that match the user input.

$(document).ready(function () {
   const filterSearch = document.querySelector('.job-search');
});

$(document).ready(function () {
	function filterJobs() {
		const searchTerm = document.querySelector('.job-search').value.toLowerCase();
		const filteredJobs = jobs.filter((job) => {
		  return (
			job.pos.toLowerCase().includes(searchTerm) ||
			job.loc.toLowerCase().includes(searchTerm)
		  );
		});
	})

	filterSearch.addEventListener('change', () => {
       filterJobs();
    });
});

• In some case, we will convert JavaScript array of jobs to job HTML DOM elements using the `appendChild` method. For example:

<div class="job-list" id="job-list">
   <div class="job-container">
      <div class="job-card-container">
         <div class="job-card-text">Database Administrator</div>
         <div class="job-card-icon">Apply &gt;</div>
      </div>
      <div style="height: 24px;"></div>
      <span>
         <svg width="12" height="12" viewBox="0 0 20 20">
            <path d="M10" fill="#6D7176"></path>
         </svg>
         <span class="job-card-location">Da Nang city </span>
      </span>
      <span>
         <svg width="12" height="12" viewBox="0 0 20 20">
            <path d="M10" fill="#6D7176"></path>
         </svg>
         <span class="job-card-location">Posted 7 Day Ago</span><span class="job-card-type">Fulltime</span>
      </span>
   </div>
   <div class="job-container">...</div>
</div>

As you can see here, how to remove an element from the DOM using JavaScript and check if it exists or not in given array

function removeAllDisplayNone() {
	jobCard.forEach((card) => {
	  card.classList.remove("display-none");
	});
}

function filterJobs() {
	removeAllDisplayNone();
	const searchTerm = document.querySelector('.job-search').value.toLowerCase();
	const filteredJobs = jobs.filter((job) => {
	  return (
		job.pos.toLowerCase().includes(searchTerm) ||
		job.loc.toLowerCase().includes(searchTerm)
	  );
	});
	jobCard.forEach((card) => {
		const jobPos = card.querySelector(':scope > .job-card-container > .job-card-text');
		const jobLoc = card.querySelector(':scope > span > .job-card-location');
		const jobExists = filteredJobs.some((job) => job.pos === jobPos.textContent.trim() || job.loc === jobLoc.textContent.trim());
		if (!jobExists) {
		  card.classList.add("display-none");
		}
	});
}

Note: The `some()` method in JavaScript returns Boolean value that indicates whether a specified element exists in an array or not.