Build Search & Filter System (js/search.js)

Goal

Allow users to search profiles by name or skill in real-time as they type — no reloads.
Your job is to make the search input actually filter what’s displayed.

File Ownership

You fully own:
/js/search.js

You’re responsible for:

Writing the filtering logic

Listening to search input changes

Updating visible profiles on screen

Learning Concepts

input event listeners

filter() and includes() methods

DOM updates (hide/show elements)

Working with modules

Functional Requirements
1. Search Input Setup

In the HTML (already or soon to be added), there’s a search box like:

You’ll attach your logic to that.

2. Create Main Function

Create a function named:

function setupSearch(profilesArray) { ... }

Inside this function:

Grab the input element

const searchInput = document.getElementById("searchInput");

Add an event listener

searchInput.addEventListener("input", () => {
const searchTerm = searchInput.value.toLowerCase();
const filteredProfiles = profilesArray.filter(profile => {
return (
profile.name.toLowerCase().includes(searchTerm) ||
profile.skills.toLowerCase().includes(searchTerm)
);
});
displayFilteredProfiles(filteredProfiles);
});

Create Helper Function

function displayFilteredProfiles(filtered) {
const container = document.getElementById("profilesContainer");
container.innerHTML = "";
filtered.forEach(profile => {
const div = document.createElement("div");
div.classList.add("profile-card");
div.innerHTML = `

${profile.name}

${profile.skills}

`;
container.appendChild(div);
});
}

3. Export the Function
export { setupSearch };

4. Integration Example

Your teammate from profiles.js or app.js will use:

import { setupSearch } from "./search.js";

setupSearch(profiles);

That’s it — your search will kick in whenever the user types.

Definition of Done

Typing filters profiles instantly (by name or skill)

Case-insensitive search

No console errors

DOM updates happen cleanly

All code inside js/search.js

Optional

Highlight the matching text inside results

Add a “No results found” message when the array is empty

The work is in js/search.js. Start by examining the existing HTML for the search input with id 'searchInput' and the profiles container with id 'profilesContainer'. Implement the setupSearch function as described, using event listeners and filter logic. Test by typing in the search box and verifying profiles are filtered. Done when typing filters profiles instantly, case-insensitively, with no console errors.

由索引模型根据 Issue 内容生成。