Autocomplete
The v-autocomplete component offers simple and flexible type-ahead functionality. This is useful when searching large sets of data or even dynamically requesting information from an API.
API
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Specifies which DOM element that this component should detach to. Use either a CSS selector string or an object reference to the element.
Components.Autocompletes.
오토 포커스 활성화
Components.Autocompletes.
대체 박스 인풋 스타일을 적용
Components.Autocompletes.
items prop으로 넘겨진 모든 항목의 유니크한 로컬 사본을 보관합니다.
Changes display of selections to chips
Components.Autocompletes.
Add input clear functionality, default icon is Material Icons clear
컨트롤에 색상을 지정
인풋 길이 카운터를 생성. 넘버가 지정되지 않으면 25가 기본 값으로 쓰입니다. 검증(validation)은 적용되지 않습니다.
다크 테마를 적용
선택된 칩(chip)에 삭제(remove) 아이콘을 추가
리스트 항목의 최대 높이를 낮춤
Components.Autocompletes.
입력시 자동 문자 표시 비활성화
수동으로 인풋을 에러 상태로 만듬
Components.Autocompletes.
인풋을 에러 상태로 만들고 커스텀 에러메시지를 전달. rules prop에 의해 발생하는 임이의 검증과 결합가능. 이 필드가 검증을 호출하지는 않습니다.
Components.Autocompletes.
Components.Autocompletes.
인풋 타입을 전체-너비로 설정
컴포넌트의 높이를 설정
Components.Autocompletes.
Components.Autocompletes.
이미 선택된 셀렉트 메뉴 항목을 보여주지 않음
Components.Autocompletes.
항목 의 아바타 값 속성을 설정
항목 의 비활성화(disabled) 값 속성을 설정
항목 의 텍스트 값 속성을 설정
항목 의 값 속성을 설정
오브젝트 배열이나 문자열 배열. 오브젝트를 사용하면 text 와 value 필드를 사용. 이는 item-text 와 item-value 를 사용해서 바꿀 수 있습니다.
Components.Autocompletes.
라이트 테마를 적용
Components.Autocompletes.
Apply a custom character mask to the input. See mask table above for more information
Components.Autocompletes.
Components.Autocompletes.
복수 선택이 가능하도록 변경. 값의 배열을 받음(?).
데이터가 없을때 보여지는 문자열
Components.Autocompletes.
clearable prop을 사용할때, 일단 한번 클리어되면 현재 상태에 따라 선택 메뉴가 열리거나 열려있게 됩니다. When using the clearable prop, once cleared
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
접두사(prefix) 표시
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Returns the unmodified masked string
선택시 item-value 로 지정된 값이 아니라 오브젝트가 바로 반환되도록 바꿈.
Components.Autocompletes.
True나 에러메시지 문자열을 반환하는 함수들의 배열
Bound when using the autocomplete prop. Use the .sync modifier to catch user input from the autocomplete search input
Label does not move on focus/dirty
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
Components.Autocompletes.
접미사(suffix) 표시
인풋 타입을 설정
blur 이벤트까지 검증을 지연
표시여부를 조절 (Controls visibility)
Components.Autocompletes.
보충
| Mask | Description |
|---|---|
| Masks | |
| # | Any digit |
| A | Any capital letter |
| a | Any small letter |
| N | Any capital alphanumeric character |
| n | Any small alphanumeric character |
| X | Any special symbol (-!$%^&*()_+|~=`{}[]:";'<>?,./\) or space |
| Pre-made | |
| credit-card | #### - #### - #### - #### |
| date-with-time | ##/##/#### ##:## |
| phone | (###) ### - #### |
| social | ###-##-#### |
| time | ##:## |
| time-with-seconds | ##:##:## |
예제
Searching an API
Easily hook up dynamic data and create a unique experience. The v-autocomplete's expansive prop list makes it easy to fine tune every aspect of the input.
Scoped slots
With the power of scoped slots, you can customize the visual output of the select. In this example we add a profile picture for both the chips and list items.
Custom filter on autocomplete
The filter prop can be used to filter each individual item with custom logic. In this example we filter items by name
Asynchronous items
Sometimes you need to load data externally based upon a search query. Use the search-input prop with the .sync modifier when using the autocomplete prop. We also make use of the new cache-items prop. This will keep a unique list of all items that have been passed to the items prop and is REQUIRED when using asynchronous items and the multiple prop.
Advanced slots
The v-autocomplete component is extremely flexible and can fit in just about any use-case. Create custom displays for no-data, item and selection slots to provide a unique user experience. Using scoped slots enables you to easily customize the desired look for your application.