여러분들은 하루에 몇 번씩 검색을 하시나요?
검색이란 사용자가 특정 키워드를 입력하여 관련된 정보를 찾는 과정을 말합니다. 검색 기능은 웹 사이트, 데이터베이스, 소셜 미디어 등 다양한 곳에서 사용되며, 사용자가 원하는 정보를 빠르게 찾을 수 있도록 도와줍니다.
예를 들어, 여러분이 친구의 이름을 검색하고 싶다고 해봅시다. 다음은 간단한 친구 검색 기능을 구현한 코드입니다. 이 코드는 사용자가 입력한 텍스트를 바탕으로 미리 정의된 친구 목록에서 검색어를 포함하는 이름들을 필터링하여 화면에 표시합니다.
// 친구 목록 배열
const 친구목록 = ["철수", "영희", "철희", "철민", "민희"];
// 검색 기능 함수
const JS_검색기능 = (event) => {
// 사용자가 입력한 검색어를 가져옵니다
const 내가검색한단어 = event.target.value;
console.log(내가검색한단어);
// 검색어를 포함하는 친구 목록을 필터링합니다
const 검색결과들 = 친구목록.filter(el => el.includes(내가검색한단어));
console.log(검색결과들);
// 검색 결과를 HTML 요소에 표시합니다
document.getElementById("HTML_검색결과보여주는곳").innerHTML = 검색결과들.join(", ");
}
친구목록: 검색할 친구들의 이름을 배열로 정의합니다.
JS_검색기능 함수는 사용자가 입력한 검색어를 받아 처리합니다.
내가검색한단어 변수에 입력된 검색어를 저장하고, 이를 콘솔에 출력합니다.
검색결과들 변수에 검색어를 포함하는 친구 목록을 필터링하여 저장합니다.
검색 결과를 콘솔에 출력하고, HTML 요소에 결과를 표시합니다.
<body>
<input type="text" placeholder="친구를 검색하세요." oninput="JS_검색기능(event)" />
<div id="HTML_검색결과보여주는곳"></div>
</body>
oninput 이벤트 속성을 사용하여 사용자가 입력할 때마다 JS_검색기능 함수가 호출되도록 합니다.