[JS] 아이디 검색 기능

목표

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();

영상