자동완성

자동완성 개요

AutoComplete 컨트롤은 사용자 유형으로 제안된 드롭다운 목록에서 선택할 수 있는 입력 컨트롤입니다. 기능 및 아키텍처 관점에서 ComboBox 컨트롤을 확장하여 다음과 같은 두 가지 추가 기능을 제공합니다.

Autocomplete은 드롭다운 목록의 항목을 자동으로 필터링하여 현재 사용자 입력과 일치하는 항목만 포함합니다. Autocomplete은 현재 사용자가 입력한 값과 검색 논리를 바탕으로 비동기식으로 드롭다운을 표시합니다. 기본적으로 ComboBox는 사용자가 입력한 값으로 시작하는 항목을 찾는 반면 AutoComplete는 사용자가 입력한 값이 포함된 항목을 찾습니다. AutoComplete은 itemsSource 속성을 사용한 항목들과 함께 나타나게 됩니다.

AutoComplete

아래 예제는 AutoComplete 컨트롤을 만들고 'countries' 배열을 사용하여 해당 컨트롤을 채우고 있습니다. 사용자 유형에 따라 AutoComplete는 국가를 검색하고 현재 입력에 따라 목록을 좁힙니다.

<label for="theAutoComplete">AutoComplete:</label>
<br/>
<div id="theAutoComplete"></div>

import * as input from '@grapecity/wijmo.input';
import { getData } from './data';

function init() {    
    let theAutoComplete = new input.AutoComplete('#theAutoComplete', {
        displayMemberPath: 'country',
        itemsSource: getData()
    });
}

자동으로 항목 추가

사용자는 항목을 isEditable 속성을 true로 설정하고 lostFocus 이벤트를 처리하여 AutoComplete itemsSource 에 동적으로 추가할 수 있습니다. 사용자가 itemsSource에 없는 값을 입력하고 포커스가 컨트롤에서 벗어나면 lostFocus 이벤트가 입력된 항목을 컨트롤의 itemsSoure로 할당된 배열에 추가합니다.

import * as wijmo from '@grapecity/wijmo';
import * as input from '@grapecity/wijmo.input';

function init() {
    let countries = new wijmo.ObservableArray(['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece']);

    new input.AutoComplete('#theAutoComplete', {
        itemsSource: countries,
        lostFocus: lostFocus
    });

    // add item to the list when a control loses focus
    function lostFocus(sender) {
        let item = sender.text;
        if (item && countries.indexOf(item) < 0) {
            countries.push(item);
        }
    }
}