SBUx - OVERVIEW

전체메뉴보기

Tutorials

2.12 리스트박스 표시 목록을 입력박스에서 필터링하기

STEP 1. listbox, input 컴포넌트 생성

1. listbox 컴포넌트, input 컴포넌트 생성

<script>
    var jsondata = [
        {text : 'input', value : 'iValue'},
        {text : 'picker', value : 'pValue'},
        {text : 'radio', value : 'rValue'},
        {text : 'select', value : 'sValue'}
    ];
</script>
<sbux-input id="filterInput1" name="filterInput1" uitype="text"></sbux-input>
<sbux-listbox id="sbIdx1_1" name="sbTagNm1_1" uitype="single" jsondata-ref="jsondata"></sbux-listbox>

STEP 2. listbox 컴포넌트에 filter-source-name 속성 추가

1. listbox 컴포넌트에 filter-source-name 속성을 추가하고 필터링할때 쓸 input의 name을 입력합니다.

<script>
    var jsondata = [
        {text : 'input', value : 'iValue'},
        {text : 'picker', value : 'pValue'},
        {text : 'radio', value : 'rValue'},
        {text : 'select', value : 'sValue'}
    ];
</script>
<sbux-input id="filterInput1" name="filterInput1" uitype="text"></sbux-input>
<sbux-listbox id="sbIdx1_1" name="sbTagNm1_1" uitype="single" jsondata-ref="jsondata" filter-source-name="filterInput1"></sbux-listbox>

'se'를 입력해보세요.