[3nd Project]카카오 Api로 주차장 구현하기 9

생각보다 빨리 한 나 칭찬해

네 검색창 기능 완벽 구현 나야나 

(소곤소곤 행복행복 신남신남)

검색창 기능 코드 리뷰하고 빨리 바나나랑 요거트 먹으러 떠날거랍니당 배고파

리뷰하기 넘 싫고 빨리 튀고 싶었는데요 
그럼에도 참았어요. 내일의 나는 더 하기 싫을테니까요 헤헤

오늘의 리뷰!
검색창에서 주차장을 검색할 때 자동완성 기능과 키보드 탐색 기능을 구현
 

🎒1. searchParking 함수

function searchParking() {
    const searchInput = document.getElementById("parking-search").value.toLowerCase(); // 검색어를 소문자로 변환하여 가져옴
    const resultsContainer = document.getElementById("autocomplete-results"); // 자동완성 결과를 표시할 컨테이너

    if (!searchInput) {
        resultsContainer.style.display = 'none'; // 검색어가 없으면 자동완성 창 숨기기
        selectedIndex = -1; // 인덱스 초기화
        return;
    }

    // 검색어와 일치하는 주차장 목록 필터링
    const filteredData = allParkingData.filter(parking =>
        parking.name && parking.name.toLowerCase().includes(searchInput)
    );

    // 자동완성 결과 표시
    displayAutocompleteResults(filteredData);

    // 키보드 이벤트 처리
    if (event.key === "ArrowDown") {
        // 아래 방향키를 누르면 인덱스 증가
        selectedIndex = (selectedIndex + 1) % filteredData.length;
        highlightItem(selectedIndex);
    } else if (event.key === "ArrowUp") {
        // 위 방향키를 누르면 인덱스 감소
        selectedIndex = (selectedIndex - 1 + filteredData.length) % filteredData.length;
        highlightItem(selectedIndex);
    } else if (event.key === "Enter" && selectedIndex >= 0) {
        // 엔터 키로 선택 항목 검색
        const selectedParking = filteredData[selectedIndex];
        document.getElementById("parking-search").value = selectedParking.name;
        resultsContainer.style.display = 'none';
        renderParkingList([selectedParking]); // 선택한 항목을 parking-list에 표시
        selectedIndex = -1; // 인덱스 초기화
    }
}

검색어 입력 시 자동완성 결과를 표시하고, 키보드로 자동완성 목록을 탐색
 
1. searchInput이 비어있으면 autocomplete-results 컨테이너를 숨기고 selectedIndex를 초기화
2. allParkingData 배열에서 searchInput과 일치하는 이름이 포함된 주차장 목록을 필터링하여 filteredData에 저장
3. displayAutocompleteResults(filteredData);를 호출하여 자동완성 결과를 표시
 
<키보드 이벤트 처리>
 
ArrowDown: selectedIndex를 증가시키고 highlightItem(selectedIndex);를 호출
ArrowUp: selectedIndex를 감소시키고 highlightItem(selectedIndex);를 호출
Enter: selectedIndex가 유효한 경우 filteredData에서 해당 항목을 선택하고 parking-search 필드에 주차장 이름을 설정한 후 renderParkingList([selectedParking]);를 호출
 
 
 
 

🥨2. highlightItem 함수

function highlightItem(index) {
    const resultsContainer = document.getElementById("autocomplete-results"); // 자동완성 결과 컨테이너
    const items = resultsContainer.querySelectorAll('.autocomplete-item'); // 자동완성 항목들
    
    // 모든 항목의 강조 표시 제거
    items.forEach(item => item.classList.remove('highlight'));

    // 인덱스가 유효할 때만 강조 표시 추가
    if (index >= 0 && index < items.length) {
        items[index].classList.add('highlight');
    }
}

자동완성 목록에서 특정 항목을 강조 표시
 

💄3. displayAutocompleteResults 함수

function displayAutocompleteResults(data) {
    const resultsContainer = document.getElementById("autocomplete-results"); // 자동완성 결과 컨테이너
    resultsContainer.innerHTML = ''; // 기존 검색 결과 초기화

    if (data.length === 0) {
        resultsContainer.style.display = 'none'; // 검색 결과가 없으면 자동완성 창 숨기기
        return;
    }

    // 필터링된 주차장 데이터를 자동완성 목록에 표시
    data.forEach(parking => {
        const item = document.createElement('div');
        item.textContent = parking.name;
        item.classList.add('autocomplete-item');
        
        // 주차장 이름을 클릭했을 때 검색창에 선택된 이름을 설정하고 자동완성 목록 숨김
        item.onclick = () => {
            document.getElementById("parking-search").value = parking.name;
            resultsContainer.style.display = 'none';
             // 선택한 주차장 정보를 parking-list에 표시
              renderParkingList([parking]); // 배열 형식으로 전달하여 단일 항목 표시
        };

        resultsContainer.appendChild(item);
    });

    resultsContainer.style.display = 'block'; // 자동완성 결과 표시
}

 
검색 결과를 자동완성 목록에 표시

data 배열의 각 주차장 항목에 대해 div 요소를 생성하고 주차장 이름을 표시
각 항목을 클릭하면 parking-search 필드에 선택된 주차장 이름을 설정하고,
renderParkingList([parking]);를 호출하여 선택한 주차장을 parking-list에 표시

selectedIndex 변수
키보드 탐색 시 현재 선택된 항목의 인덱스를 저장하고
방향키로 항목을 탐색할 때 증가하거나 감소하며, 선택 후 초기화시킴

event.key
키보드 입력에 따라 ArrowDown, ArrowUp, Enter 키 이벤트를 처리하여 목록을 탐색하거나 항목 선택

renderParkingList 호출
선택한 주차장을 자동완성 목록에서 클릭하거나 Enter 키로 선택하면,
renderParkingList 함수가 호출되어 주차장 정보를 parking-list에 표시

---

검색창이 뭐? 대수야? 하는 사람도 있겠지만
모든 기능을 만들 때 부품부터 만들어 가면서 하는 작업이기 때문에 
아주 사소한 오류여도 손이 닿는 곳이 많다
요즘엔 앱이나 웹을 볼 때 이 기능은 어떻게 구현이 된거며, 어떤 로직을 사용하는지
DB설계는 어떻게 하는 걸까 궁금한 경우가 많다.
초보자에게는 모든게 다 신기한 상황들

내내 답답했던 상황이 하나씩 해결되고 내가 성장했다는 걸 증명한 순간의 짜릿함
배고픔도 잊었다니 강력한 엔돌핀
◑﹏◐

추가적으로 디테일을 잡아야겠지만, 큰 기능들은 완료했으니까요!!!!!!!!!!!!!!!!!!!!!
맘마 먹고 공부해야지 
이야호~