맨위로가기
 

SBUx

닫기

2.1 입력박스에 빠른 입력 선택을 위한 자동완성 기능 넣기

STEP 1. autoComplete 속성 사용

1. 문자열로 이루어진 배열형태로 Data를 구성합니다. 
<script>
    var autoCompData=["red", "green", "blue", "yellow","black"];
</script>
2. 컴포넌트에 autocomplete-ref 속성을 이용하여 연동합니다. 
<sbux-input id="sbIdx1" name="sbName1" uitype="text" autocomplete-ref="autoCompData"></sbux-input>

STEP 2. autoClplete 속성 추가 기능 사용

1. autocomplete-select-callback 속성을 적용합니다. 
<script>
    function autoFunc(value, label){
        console.log("선택한 항목 : " + value, label);
    }
</script>
<sbux-input id="sbIdx1" name="sbName1" uitype="text" autocomplete-ref="autoCompData" autocomplete-select-callback="autoFunc"></sbux-input>
1. red를 입력해보세요. 2. blue를 입력해보세요. f12를 눌러 콘솔창을 확인해보세요.