nav 검색창에 아이디를 검색하면,
해당 문자열을 포함하는 아이디를 화면에 보여준다.
<!-- HTML -->
<div id="searchBox">
<input type="text" id="searchInput" placeholder="검색" />
<ul id="searchedUserList" class="list-users"></ul>
</div>
// js
function init() {
searchId();
}
// 임시 데이터
const userDataList = [
{
id: 1,
userid: 'wecode_bootcamp',
username: '>wecode | 위코드',
avatar: './img/img-profile.png',
},
{
id: 2,
userid: 'wecode_founder',
username: '송은우 (Eun Woo Song)',
avatar: './img/img-profile.png',
},
{
id: 3,
userid: 'wecode_korea',
username: '',
avatar: './img/img-profile.png',
},
{
id: 4,
userid: 'Wecode',
username: '강남구 테헤란로 427, 서울',
avatar: './img/img-profile.png',
},
];
// 유저 아이디 검색 기능
function searchId() {
const searchInput = document.getElementById('searchInput');
const searchedUserList = document.getElementById('searchedUserList');
let searchedDataList = [];
function searchIdFromData(e) {
const searchValue = e.target.value;
if (searchValue !== '') {
searchedDataList = userDataList.filter((user) =>
user.userid.includes(searchValue)
);
searchedUserList.style.display = 'block';
searchedUserList.innerHTML = searchedDataList
.map((data) => {
return `
<li>
<div class='box-user'>
<span class='thumb-img'>
<img src='./img/img-thumbnail.jpeg' alt='' />
</span>
<span class='box-cont'>
<strong class='tit-user'>${data.userid}</strong>
<span class='cont-info'>${data.username}</span>
</span>
</div>
</li>`;
})
.join('');
} else {
// 검색어가 없을 시 리스트 초기화 및 숨김 처리
searchedUserList.style.display = 'none';
searchedDataList = [];
}
}
searchInput.addEventListener('input', searchIdFromData);
}
init();