웹사이트에 흔히 있는 검색어 자동완성 UI를 만들어 보았다
function SearchBar({ updateChange, search, setSearch }) {
return (
<div className="search">
<input
className="seacrh-bar"
style={{
width: "100%",
height: "40px",
maxWidth: "800px",
border: "1px solid white",
}}
placeholder="검색어를 입력하세요."
onChange={(e) => updateChange(e)}
></input>
.
.
.
우선 SearchBar 컴포넌트를 하나 만들어주었고 input에 onChange
속성으로 updateChange()
함수를 실행
let [search, setSearch] = useState([]);
자동완성 결과를 저장할 state도 하나 만든다
const updateChange = (e) => {
let data = e.target.value;
let filterData = mydata.filter((i) =>
i.name.toLowerCase().includes(data.toLowerCase())
);
if (data.length === 0) {
filterData = [];
}
setSearch(filterData);
};
data: e.target.value
로 input의 입력값 저장
filterData: 서버에서 받아온 데이터가 저장 되어있는 mydata 변수에 filter()
를 돌려 데이터 안에 name속성을 소문자로 변환한다. 그리고 input의 입력값이 저장된 data변수를 소문자로 변환시켜 includes()
를 활용해 같은 문자열이 포함된다면 filterData에 저장
마지막으로 setSearch를 이용, 필터링된 데이터를 저장
if (data.length === 0) {
filterData = [];
}
해당 조건문이 없다면 백스페이스로 input 입력을 전부 지웠을시 자동완성 칸이 남아있다, 그것을 방지하기 위한 조건문
이제 자동완성된 데이터를 뱉어주기만 하면 된다.
function SearchBar({ updateChange, search, setSearch }) {
return (
<div className="search">
<input
className="seacrh-bar"
style={{
width: "100%",
height: "40px",
maxWidth: "800px",
border: "1px solid white",
}}
placeholder="검색어를 입력하세요."
onChange={(e) => updateChange(e)}
></input>
{search.map((item) => {
return (
<>
<div className="search-result">
<Link to={"/info/" + item.id}>
<p onClick={() => setSearch([])}>
{item.name} ({item.kor_name})
</p>
</Link>
</div>
</>
);
})}
</div>
);
}
자동완성 결과가 저장되어있는 search state에 map을 이용해 렌더링하면 끝
자동완성 결과에 Link
를 주어 누르면 해당 페이지로 바로 이동하게 하였다.
p 태그의 onClick
옵션은 페이지로 이동후 뒤로가기를 하면 자동완성 UI가 그대로 남아있기때문에 자동완성 결과를 초기화 하기 위한 코드이다.
CSS는 알아서.. (CSS가 제일싫어.................)