앞서 주의사항!
- 저도 공부하는 중이라 이해도가 낮아 설명에 있어서 부족한 부분이 있을 수 있습니다.
- 하지만 도움이 되실 분도 있으리라 생각합니다.
목적: 검색어 자동 완성 만들어볼 것 (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] 검색어 자동완성 만들어보기
앞서 주의사항! - 저도 공부하는 중이라 이해도가 낮아 설명에 있어서 부족한 부분이 있을 수 있습니다. - 하지만 도움이 되실 분도 있으리라 생각합니다. 검색어 자동 완성 만들어볼 것 - App
ososoi.tistory.com
소스코드
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
결과화면
'까벨로퍼 > 개발 이야기' 카테고리의 다른 글
| [REACT] axio / d3 / react 16 / react 17 개발 일기 (0) | 2021.08.20 |
|---|---|
| [REACT] should have a unique "key" prop 을 만났을때.. (0) | 2021.06.26 |
| [REACT] SELECT 만들어 보기 (0) | 2021.06.07 |
| [REACT] 검색어 자동완성 만들어보기 (0) | 2021.06.06 |
| [kotlin] 안드로이드 앱에 인트로 화면 추가하기 (0) | 2021.05.25 |