Autocomplete

자동완성을 지원하는 Input 컴포넌트의 변형된 형태의 컴포넌트입니다.

내부적으로 Input 컴포넌트를 사용합니다.

import { Autocomplete, Form, SuggestedItem } from '@mint-ui/core';

interface SampleData {
  name: string;
  value: string;
}

function getData(cnt:number):SuggestedItem<SampleData>[] {
  return Array.from(Array(cnt)).map((_, idx) => ({
    label: `name:${idx}`,
    value: {
      name: `name:${idx}`,
      value: `value:${idx}`,
    },
  } as SuggestedItem<SampleData>));
}

// 테스트 데이터
const data = getData(100);

// 가상 api
async function search(value: string) {
  return data.filter((item) => item.label.indexOf(value) >= 0);
}

export function AutocompleteBasic() {
  const [ searchData, setSearchData ] = useState({ value: '' });

  // key 입력시마다 호출되는 부분
  const handleKeyInput = (value: string) => {
    if (value) {
      return search(value);
    }
    return [];
  };

  useEffect(() => {
    console.log('changed', searchData);
  }, [ searchData ]);

  return (
    <Frame>
      <Form
        data={searchData}
        setData={setSearchData}
        onFormSubmit={(() => {
          console.log('form submit');
        })}
        formId='aaaa'
      >
        <Autocomplete
          width='200px'
          placeholder='숫자를 검색해주세요.'
          targetId='value'
          onKeyInput={(value) => handleKeyInput(value)}
          onSelectItem={(v) => {
            console.log('선택됨', v);
            setSearchData({ value: v.value.name });
          }}
          onSubmit={(e) => e.stopPropagation()}
        />
      </Form>
    </Frame>
  );
}

속성 설명

width

width: CSSProperties['width']

자동완성 input 의 폭을 지정합니다.

onKeyInput

export interface SuggestedItem<P> {
  label:string;
  value:P;
}

onKeyInput 
=> (inputValue:string)=>Promise<SuggestedItem<P>[]>|SuggestedItem<P>[]

키 입력시마다 호출되는 콜백입니다.

파라미터로 들어오는 inputValue 는 입력된 input 의 값 입니다. 이 값을 받아서 자동완성 후보 리스트를 리턴해주면 자동완성 대상으로 표시됩니다.

SuggestedItem 의 label 이 자동완성 대상에 표시될 값입니다. 여기에 특정 value 를 매칭해놓으면 나중에 값을 선택했을때 단순히 input 의 입력값 외에도 원하는 데이터를 얻어서 처리할 수 있습니다.

onSelectItem

onSelectItem:(item:SuggestedItem<P>)=>void;

자동완성 리스트에서 선택을 했을때 호출되는 콜백입니다.

크게 두가지 상황에서 호출될 수 있습니다.

마우스 클릭시
키보드 방향키로 이동 후 엔터키 입력시

제공되는 item 파라미터는 클릭한 아이템에 해당되는 SuggestedItem 값 입니다.

(optional) itemRenderer

자동완성 리스트의 렌더링을 커스터마이징 할 수 있게 해주는 함수입니다.

itemRenderer?:(item:SuggestedItem<P>, index:number)=>JSX.Element;

자동완성 리스트 컨테이너 하위에 렌더링할 대상의 수 만큼 이 함수가 호출됩니다.

이때, item은 SuggestedItem 값이고 index 는 현재 렌더링 대상 아이템의 인덱스 값 입니다.

<Autocomplete
  width='200px'
  placeholder='숫자를 검색해주세요.'
  targetId='value'
  onKeyInput={(value) => handleKeyInput(value)}
  onSelectItem={(v) => {
    console.log('선택됨', v);
    setSearchData({ value: v.value.name });
  }}
  itemRenderer={(item, idx)=>{
    return <div>{`${item.label} - ${idx}`}</div>
  }}
/>

(optional) itemMaxWidth

itemMaxWidth?:string;

자동완성 리스트의 최대 폭을 지정합니다.

기본적으로 자동완성 리스트는 자동완성 input 의 크기를 최소 폭으로 갖습니다. 최대폭은 내부 아이템의 크기에 따라 늘어납니다.

itemMaxWidth 를 지정하면 이 크기를 원하는 길이로 제한할 수 있습니다. 예를 들어 input 의 크기와 동일하게 설정하면 자동완성 리스트는 input 의 크기에 맞춰지게 됩니다.

<Autocomplete
  width='200px'
  placeholder='숫자를 검색해주세요.'
  targetId='value'
  onKeyInput={(value) => handleKeyInput(value)}
  onSelectItem={(v) => {
    console.log('선택됨', v);
    setSearchData({ value: v.value.name });
  }}
  itemRenderer={(item, idx)=>{
    return <div>{`${item.label} - ${idx}ssssssssssssssssssss`}</div>
  }}
  itemMaxWidth='200px'
/>

Autocomplete

속성 설명​

width​

onKeyInput​

onSelectItem​

(optional) itemRenderer​

(optional) itemMaxWidth​