[React] 검색어 자동완성

거의 모든 웹사이트나 앱에서 사용자의 편의를 위해 검색어 자동완성 기능이 구현되어 있다고 생각한다.

부트캠프 과제에서 모두 검색어 자동완성 기능은 구현을 했었기 때문에 기록을 해두려한다.

최근 진행했던 토이프로젝트 검색어 자동완성

 

 

Code

가독성을 위해 css 코드나 불필요한 코드들은 정리한 코드.

 

1. Input에 입력되는 데이터를 searchValue 상태값에 업데이트

2. showDropDown 함수를 searchValue(검색어)가 바뀔때마다 실행하기 위해 useEffect() 처리

3. 상품데이터에서 filter() 를 통해 상품명에 검색어가 포함된 데이터들만 필터링해주고 dropDownList 상태값에 업데이트

4. 필터링된 데이터인 dropDownList를 map 함수를 이용해 렌더링

export default function Search() {
  const { data } = useQuery<ProducstsProps[]>("products", getProducsts);
  const [searchValue, setSearchValue] = useState("");
  const [dropDownList, setDropDownList] = useState<ProducstsProps[] | undefined>(data);
  const [autoComplete, setAutoComplete] = useState(false);

  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    setSearchValue(e.target.value);
  };

  useEffect(() => {
    const showDropDown = () => {
      if (searchValue === "") {
        setDropDownList([]);
      } else {
        const showList = data?.filter((item) => item.name_kr.includes(searchValue));
        // 불러온 데이터의 name(상품이름)에 searchValue(검색어)가 포함된 데이터들만 필터링 
        setDropDownList(showList);
        // dropDownList에 필터링된 데이터를 넣어줌
      }
    };
    showDropDown();
  }, [searchValue]);

  return (
    <>
      <Wrapper>
        <Input placeholder="제품명 등 검색" onClick={() => setAutoComplete(!autoComplete)} />
      </Wrapper>

      {autoComplete ? (
        <Container>
          <AutoCompleteWrapper>
            <AutoComplete>
              <Wrapper>
                <SearchInput
                  type="text"
                  onChange={handleChange}
                  value={searchValue}
                  placeholder="제품명 등 검색"
                />
              </Wrapper>
              <DropDownList>
                {dropDownList?.map((item) => (
                  <Link
                    to={`/trade/${item.id}`}
                    key={item.id}
                    onClick={() => setAutoComplete(false)}
                  >
                    <Items>
                      <Image src={item.image} alt={`${item.name_kr} 이미지`} />
                      <NameWrapper>
                        <KrName>{item.name_kr}</KrName>
                        <EnName>{item.name_en}</EnName>
                      </NameWrapper>
                    </Items>
                  </Link>
                ))}
              </DropDownList>
            </AutoComplete>
          </AutoCompleteWrapper>
        </Container>
      ) : null}
    </>
  );
}

 

 

후기

기본적인 검색어 자동완성에 더 추가해보고 싶은 것들이 생겼다. 엔터를 눌렀을때는 최근 검색어에 저장되어 이후에도 확인할 수 있고, 최근 검색어 목록이 최대 10개라면 오랜된 것부터 차례로 삭제되는 것도 추가해봐야겠다.