[REACT] ant design + 검색어 자동 완성 만들어보기

 

앞서 주의사항!

 - 저도 공부하는 중이라 이해도가 낮아 설명에 있어서 부족한 부분이 있을 수 있습니다.

 - 하지만 도움이 되실 분도 있으리라 생각합니다.

 

목적: 검색어 자동 완성 만들어볼 것 (with antd)

 - App.js

  + src

    +--- App.js

 

 - 준비 : antd (ant design lib)

   ant design ui 라이브러리를 사용하여 좀더 미려하고 쉽게 구현을 해보자

 

프로젝트를 생성하고 vs code실행

> npx create-react-app test

> cd test

> npm i antd

> code .

 

해야할 일

- 기본적인 검색어 자동 완성에 대한 코드는 아래에서 참고.

 

[REACT] 검색어 자동완성 만들어보기

 

소스코드

antd 기본 샘플 예제

import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { AutoComplete } from 'antd'; const { Option } = AutoComplete; const Complete = () => { const [result, setResult] = useState([]); const handleSearch = (value) => { let res = []; if (!value || value.indexOf('@') >= 0) { res = []; } else { res = ['gmail.com', '163.com', 'qq.com'].map((domain) => `${value}@${domain}`); } setResult(res); }; return ( <AutoComplete style={{ width: 200, }} onSearch={handleSearch} placeholder="input here" > {result.map((email) => ( <Option key={email} value={email}> {email} </Option> ))} </AutoComplete> ); }; ReactDOM.render(<Complete />, document.getElementById('container'));

- 기본 샘플을 실행 시켜보고 내가 원하는 컨셉으로 수정~

  기본 샘플 예제는 input 박스에 텍스트 입력시 그텍스트를 가지고 약속된 email 주소를 자동 완성해주는 예제

 

 

수정

 - rest 서버에서 대상 데이터들을 받아왔다고 가정하고 가상 데이터들을 추가

 - 테이타풀에서 매치되는 것을 찾아서 출력

import React, { useState } from 'react'; import ReactDOM from 'react-dom'; import 'antd/dist/antd.css'; import './index.css'; import { AutoComplete } from 'antd'; const { Option } = AutoComplete; const datas = [   {value:'삼성전자'},   {value:'삼성바이오로직스'},   {value:'LG전자'},   {value:'LG화학'},   {value:'DL'}, ] const App = () => {   return (     <Complete/>   ) }; const Complete = () => {   const [result, setResult] = useState([]);   const handleSearch = (inputValue) => {     let res = [];     if (!inputValue) {       res = [];     } else {       res = datas.filter(item => true === matchName(item.value, inputValue));     }     console.log('setResult', res);     if (res.length > 0) {       setResult(res);     }   };   const matchName = (name, keyword) => {     //console.log('matchName', name, keyword);     if(name.toUpperCase().indexOf(keyword.toUpperCase()) !== -1)     {       console.log('matchName true');       return true;     }     else {       console.log('matchName false');       return false;     }   };   return (     <AutoComplete       style={{         width: 200,       }}       onSearch={handleSearch}       placeholder="input here"       // filterOption={(inputValue, option) =>       //   option.value.toUpperCase().indexOf(inputValue.toUpperCase()) !== -1       // }     >      {result.map((item) => (           <Option key={item.value}> {item.value}</Option>       ))}     </AutoComplete>   ); }; export default App;

 

실행

> npm run start

 

결과화면