'react 검색어 자동완성' 태그의 글 목록

react 검색어 자동완성

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

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

2021. 6. 7. 12:11

앞서 주의사항!

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

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

목적: 검색어 자동 완성 만들어볼 것 (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

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

2021. 6. 6. 13:32

앞서 주의사항!

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

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

검색어 자동 완성 만들어볼 것

- App.js, SearchBar.js (파일 생성)

+ src

+--- App.js

+--- SearchBar.js

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

> npx create-react-app test

> cd test

> code .

소스코드

// App.js
import './App.css';
import React, { useState } from "react";
import SearchBar from './SearchBar';

// App.js 에 기본적으로 추가되는 코드를 정리하고 심플하게 만듦
function App() {

//검색에 필요한 원천 데이타, 검색어, 결과값
const data = [
    {"name":"키움증권", "code":"000000"},
    {"name":"삼성전자", "code":"000002"},
    {"name":"LG전자", "code":"000003"},
    {"name":"스튜디오드래곤", "code":"000004"},
    {"name":"영호화학", "code":"000005"},
    {"name":"씨젠", "code":"000006"},
    {"name":"LG화학", "code":"000007"},
    {"name":"DL", "code":"000008"},
    {"name":"오뚜기", "code":"000009"},
  ];
  const [keyword, setKeyword] = useState();
  const [results, setResult] = useState([]);

  // 필드를 업데이트
  const updateField = (field, value, update = true) => {
    if (update) onSearch(value);
    if (field === 'keyword') {
      setKeyword(value);
    }
    if (field === 'results') {
      setResult(value);
    }
  }

  // 입력된 텍스트로 data 배열에서 찾아 매칭되는 결과들을 저장
  const onSearch = text => {
    var results = data.filter(item => true === matchName(item.name, text));
    setResult({ results });
  };

// 검색해야할 문자열을 키워드와 비교하여 매칭이 되는지 체크
   const matchName = (name, keyword) => {
    var keyLen = keyword.length;
    name = name.toLowerCase().substring(0, keyLen);
    if (keyword === "") return false;
    return name === keyword.toString().toLowerCase();
  };


  return (
    <div className="App">
          Search Auto Complete
          <SearchBar keyword={keyword} results={results} updateField={updateField}></SearchBar>
    </div>
  );
}

export default App;

// SearchBar.js

import React from "react";

// 키워드, 결과값들, 업데이트필드를 전달받는다
const SearchBar = ({ keyword, results, updateField }) => {

  //
    const updateText = text => {
        //console.log('update text', text);
        updateField("keyword", text, false);
        updateField("results", []);
    };

    var renderResults;
    const arr = results['results'];
    if(arr) {
    // arr 에 검색어에 대한 결과가 담기면, SearchView 호출
    renderResults = arr.map((item => {
            return (
                <SearchView
                    updateText={updateText}
                    name={item.name}
                    code={item.code}
                    key={item.code}
                />
            );
        }));
    }
    // onChange를 사용하여 글자를 입력할때마다 updateField호출하고 renderResults를 그린다.
    return (
        <div className="auto">
            <input
                className="search-bar"
                placeholder="Search"
                value={keyword || ''}
                onChange={e => updateField("keyword", e.target.value)}
            />
            <div className="search-results">{renderResults}</div>
        </div>
    );
};

// 검색된 아이템 "naem" "code" 출력
// 결과값을 클릭하면 updateText를 호출하여 input에 name을 표시
const SearchView = ({ name, code, index, updateText }) => {
    //console.log('search view:', name);

    return (
      <div
        onClick={() => updateText(name)}
        className={`search-preview ${index === 0 ? "start" : ""}`}
      >
        <div className="first">
          <p className="name">{name}</p>
          <p className="code">{code}</p>
        </div>
      </div>
    );
  };

export default SearchBar;

실행

> npm run start

결과화면

'까벨로퍼 > 개발 이야기' 카테고리의 다른 글

[REACT] ant design + 검색어 자동 완성 만들어보기 (0)	2021.06.07
[REACT] SELECT 만들어 보기 (0)	2021.06.07
[kotlin] 안드로이드 앱에 인트로 화면 추가하기 (0)	2021.05.25
[react] 네비게이션바 F5 누르면 상태가 초기화 되는 현상 해결 (0)	2021.05.18
[react] 웹 프레임 창 타이틀 수정 (0)	2021.05.17

PREV 1 NEXT

찾아주셔서 감사합니다. 구독과 공감/댓글에 힘이 납니다. 행복하세요^^