textContent의 공백 문제

 

---

https://choi95.tistory.com/86

auto-complete_비동기 콜백 함수, focusEvent, mouseEvent

이전 포스팅에서 구현 자동 추천 검색 리스트에 추천으로 뜬 완성된 키워드를 클릭하면 Input 태그 value에 바인딩되도록 다음과 같이 코드를 구현하였다.

this.searchListElement.addEventListener('click', e => {
            let targetItem = e.target.textContent;
            this.textinputElement.value = '';
            this.textinputElement.value = targetItem; 
            this.hiddenElem(this.searchListElement);
        })

하지만 위 영상과 같이 클릭한 위치에 따라 Input 태그에 키워드가 나타나는 위치가 다르다는 문제가 발생하였다.

 

innerText를 통한 해결

리스트에서 키워드 자체가 아닌 항목 부분을 클릭할 경우에는

키워드가 존재하는 span 태그를 감싸는 wrapper에 이벤트 타겟이 바인딩된다.

 

textContent는 스페이스(공백)을 포함한 모든 텍스트를 그대로 가져온다. 반면에 innerText는 불필요한 공백을 제거하고 텍스트로 반환하기 때문에 wrapper 태그와 span 태그 사이에 존재했던 불필요한 공백을 제거하고 문자만 그래로 출력할 수 있었다.

 

다만, 다음부터는 정확한 이벤트 타겟팅을 하기 위해서 상위 컨테이너에서 이벤트 위임을 할 경우에는 조건문을 사용하여 타겟팅하고자 하는 요소를 명확하게 식별하는게 좋은 방법일 것 같다.

 

비동기 후속 처리에서 해결

외부에 별도로 클릭 이벤트를 걸어 Input 태그에 value값을 지정해주는 것이 아니라 이전 포스팅에서의 후속 처리 메서드 내에서 해결하는 방식이 있었다.

requestAdapter.get(this.requestUrl, targetText)
                .then((result) => {
                    this.displayWordList(
                        this.searchListElement,
                        result
                    ).forEach((element, index) => { // document.querySelectorAll('.auto-complete-item-box') 반환
                        element.addEventListener('click', () => {
                            this.textinputElement.value = result[index].text;
                            this.hiddenElement(this.searchListElement);
                        });
                    });
                });