input박스에서 검색어를 치면 자동완성 기능을 만드려고 한다. 우리가 검색을 하려고 하는 기능은 1. 책검색 2. 사용자가 올린 태그 기반으로 컬렉션 검색
그래서 먼저 태그를 배열로 한번에 받은 다음에 Hint라는 라이브러리를 사용해서 구현했다. 이것은 다음 게시물에 담겠다.
그래서 2글자 이상 쳤을때 디바운스를 이용하여 일정 시간동안 이벤트가 없으면 서버에 검색요청이 가도록 했다. 그리고 서버에서 받아온 값을 리덕스에 저장하고 리덕스에 있는 값을 밑에 띄웠다. 여기서 클릭을 하면 클릭한 값이 input박스의 value로 들어가도록 만들었고 바로 검색이 되도록 하고싶다. 여기서 같은 값이 나오기도 한다. 이게 보니까 체험판도 있고 무슨 한정판도 있고 그래서 저게 중복으로 나오는거다. 한가지 문제가 더 생겼다. 제목을 클릭하면 저렇게 태그가 같이 들어갈때도 있다. text =p?.title.replace(/<(\/)?([a-zA-Z]*)(\s[a-zA-Z]*=[^>]*)?(\s)*(\/)?>/ig, ""); 이 식을써서 정규식으로 태그를 없애줬다. 검색페이지 |