41 lines
1.0 KiB
Markdown
41 lines
1.0 KiB
Markdown
# AutocompleteSearchInput 컴포넌트
|
|
|
|
자동완성 드롭다운 방식의 엔티티 검색 입력 컴포넌트입니다.
|
|
|
|
## 특징
|
|
|
|
- 타이핑하면 즉시 드롭다운 표시
|
|
- 빈 값일 때 전체 목록 조회
|
|
- 추가 정보 표시 가능
|
|
- X 버튼으로 선택 초기화
|
|
- 외부 클릭 시 자동 닫힘
|
|
|
|
## 사용 예시
|
|
|
|
```tsx
|
|
<AutocompleteSearchInputComponent
|
|
tableName="customer_mng"
|
|
displayField="customer_name"
|
|
valueField="customer_code"
|
|
searchFields={["customer_name", "customer_code"]}
|
|
placeholder="거래처명 입력"
|
|
showAdditionalInfo
|
|
additionalFields={["customer_code", "address"]}
|
|
value={selectedCode}
|
|
onChange={(code, fullData) => {
|
|
console.log("선택됨:", code, fullData);
|
|
}}
|
|
/>
|
|
```
|
|
|
|
## 설정 옵션
|
|
|
|
- `tableName`: 검색할 테이블명
|
|
- `displayField`: 표시할 필드
|
|
- `valueField`: 값으로 사용할 필드
|
|
- `searchFields`: 검색 대상 필드들
|
|
- `placeholder`: 플레이스홀더
|
|
- `showAdditionalInfo`: 추가 정보 표시 여부
|
|
- `additionalFields`: 추가로 표시할 필드들
|
|
|