위스타그램

검색어 자동추천 기능

완성된 작업물은 위와 같다.
검색창에 입력값을 받고 입력된 값이 포함된 값들이 밑에 표시되게 설정했다.

자바스크립트

1. 값에 해당하는 새로운 배열을 반환하기

우선 아이디의 값이 포함되어있는 배열을 만들어 두었다.
배열은 다음과 같은 값이다.
또 새로운 배열은 만든다음 필터링해서 저장할 새로운 빈 배열을 만들었다. 원래 이미지도 요소로 추가하려고 했기에 배열 내부의 객체로 만들었으나,, 그러지 않았기에 객체에는 id요소만 남아있다. (이걸거면 그냥 배열안의 객체가 아닌, 그냥 배열로만 만들어도 충분,,,)

let userArr = [
    {id : 'tjdtnxkrmfoa'},
    {id : 'WeCode'},
    {id : 'Instagram'},
    {id : 'Holywater'},
    {id : 'JustCode'}
];
let newarr = []

입력한 값과 기존배열에 있는 요소들을 비교해서 새로운 배열에 저장하는 함수를 하나 만들었다.

function search(){    
    if(searchInput.value != ""){
    newarr = userArr.filter(item=>
        item.id.includes(`${searchInput.value}`)
    )
    }else{ newarr = []
    }
}

filter함수로 만들었다.
searchInput은 html의 검색창에 해당하는 input태그를 js로 불러온 것이다.
배열의 n번째 요소의 id가 searchInput의 값을 포함하고 있으면 참으로 해당 요소들을 반환해서 새로운 배열로 저장한다.

2. 새로운 배열을 html요소로 추가하기

function paintSearchList(){
    searchBar.innerHTML = ""
    newarr.map(item=>{
        let li = document.createElement('li');
        let span1 = document.createElement('span');
        let span2 = document.createElement('span');

        span1.innerText = `${item.id}`;
        span2.classList.add('userImg');
        
        searchBar.appendChild(li);
        li.appendChild(span2);
        li.appendChild(span1); 
    }
    )
}

배열을 추가할 때는 map함수를 활용했다.
searchBar라는 변수는 내가 요소들을 추가할 html요소이고 그걸 js에 불러왔다.
일단 화면에 표시하기 전에 화면에 표시된 요소들을 비우기 위해 innerHTML=""을 해두었다..
(이 과정 없이 진행했더니,, map으로 배열을 반환할 때 마다 초기화되지 않고 계속 누적되어 쌓였다..)

아래는 위의 코드 중 맵 이하의 함수이다.

		let li = document.createElement('li');
        let span1 = document.createElement('span');
        let span2 = document.createElement('span');

        span1.innerText = `${item.id}`;
        span2.classList.add('userImg');
        
        searchBar.appendChild(li);
        li.appendChild(span2);
        li.appendChild(span1); 

한개의 배열 원소마다 span 태그 두 개와 그 스판태그들이 담길 li요소하나를 만들어 총 세개를 만들어준다.
span1에는 받은 배열의 id에 해당하는 값을 저장, span2에는 이미지를 추가할 것 이기 떄문에 미리 만들어 둔 css를 추가해 주었다.
searchBar에 li를 담고, 그 li에 span태그 두개를 차례로 저장했다.

3. 이벤트처리

paintSearchList함수는 search함수안에서 실행되도록 하고

만약 input창에 값이 입력되면 자동으로 search되고 바로 화면에 나타나는 painSearchList가 실행되도록 설계했다.

4. focus와 blur로 input창이 포커스 될 때만 searchBar나타나게 하기

searchBar는 기본적으로 초기에 보여야할 항목은 아니기 때문에 display : none; 을 설정해 두었다.

function searchbarShow(){
    searchBar.classList.remove('displaynone');
}
function searchBarHidden(){
    searchBar.classList.add('displaynone');
}

searchInput.addEventListener('focus', searchbarShow)
searchInput.addEventListener('blur', searchBarHidden)

함수 두개를 만들어 input창에 focus이벤트가 발생하면 서치바에 display : none속성이 삭제되도록.
input창에 blur이벤트가 발생하면 서치바에 display : none속성이 추가되도록 했다.