[]
데모 테마 디자이너 도움말 API
다른 샘플 다운로드
(Showing Draft Content)

검색

기본적으로 AutoComplete 컨트롤은 displayMemberPath 속성으로 지정된 속성과 일치하는 내용을 검색합니다. searchMemberPath 속성을 쉼표로 구분된 검색 속성 목록으로 설정하여 검색을 다른 속성으로 확장할 수 있습니다.


예를 들어 아래 이미지에 표시된 AutoComplete는 국가와 대륙 이름을 검색하도록 구성되어 있습니다. 따라서 "ni"를 입력하면 "United States"와 "Australia"가 반환됩니다. 여기서 "United States"는 국가 이름 자체에 "ni"라는 입력 문자열이 포함되어 있는 반면, "Australia"는 해당 대륙의 이름 "Oceania"에 검색 문자열이 포함되어 있기 때문에 결과로 표시됩니다.


ac-search-path_4

HTML
<label for="theAutoComplete">AutoComplete:</label>
<div id="theAutoComplete"></div>
Javascript
import * as input from '@mescius/wijmo.input';
import { getData } from './data';


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

AutoComplete 컨트롤은 사용자가 컨트롤에 두 개 이상의 문자를 입력하면 500ms 후에 일치 항목 검색을 시작하고, 6개의 일치 항목을 찾은 후 검색을 중지합니다. delay, minLength 및 maxItems 속성 값을 변경하여 이러한 기본값을 변경할 수 있습니다.

IME 조합 중 검색

기본적으로 AutoComplete는 IME 조합이 완료된 후에 검색을 시작합니다. 사용자가 한국어, 일본어 또는 중국어와 같은 문자를 조합하여 입력하는 동안에는 입력이 확정될 때까지 필터링이 수행되지 않습니다.

IME 조합이 진행 중인 동안에도 필터링을 수행하려면 searchDuringComposition을 true로 설정합니다.

searchDuringComposition.gif

이 경우에도 minLength, delay, maxItems 설정은 그대로 적용됩니다.

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

const ac = new input.AutoComplete('#theAutoComplete', {
  itemsSource: ['가', '가나다', '한국어', '서울역'],
  minLength: 1,
  searchDuringComposition: true
});

  • 기본값: false

  • 지원 컨트롤: AutoComplete&MultiAutoComplete

searchDuringComposition에 대한 자세한 내용은 API 참조를 참고하시기 바랍니다.

사용자 정의 검색

AutoComplete 컨트롤의 기본 검색 알고리즘은 사용자 입력이 포함된 항목을 검색합니다. 기본 검색 알고리즘은 itemsSourceFunction 속성을 사용하여 사용자 정의 할 수 있습니다.


예를 들어 사용자 입력이 포함된 항목을 찾는 대신, 해당 입력으로 시작하는 항목을 찾을 수 있습니다. 아래 코드를 통해 얻은 결과에서 "it"을 입력하면 "United States"가 아닌 "Italy"만 반환됩니다.

Javascript

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


function init() {	
    // AutoComplete with custom search
    let theAutoCompleteCustom = new input.AutoComplete('#theAutoCompleteCustom', {
        displayMemberPath: 'country',
        itemsSourceFunction: (query, max, callback) => {
            // empty query? no results
            if (!query) {
                callback(null);
                return;
            }
            //
            // find items that start with the user input
            let allItems = getData(), queryItems = [], rx = new RegExp('^' + query, 'i');
            //
            for (let i = 0; i < allItems.length && queryItems.length < max; i++) {
                if (rx.test(allItems[i].country)) {
                    queryItems.push(allItems[i]);
                }
            }
            callback(queryItems);
        }
    });
}

사용자 정의 스타일

적으로 AutoComplete 컨트롤은 wj-autocomplete-match 클래스를 드롭다운 목록의 일치 범위에 적용하여 일치 항목을 강조 표시합니다. Wijmo의 css는 이러한 요소를 굵게 만드는 규칙을 정의합니다.


다른 스타일을 사용하여 일치 항목을 강조 표시하려면, CSS를 통해 wj-auto-complete-match 클래스에 적용된 규칙을 사용자 정의할 수 있습니다.


예를 들어, 다음 CSS는 배경색과 테두리로 검색 텍스트를 강조 표시합니다.


ac-custom-style_5

CSS
.wj-autocomplete-match {
  border: 1px solid green;
  background: #e0ffe0;
}


사용자 지정 필터

기본적으로 AutoComplete 컨트롤은 기본 제공 텍스트 일치 로직을 사용하여 드롭다운 목록에 포함할 항목을 결정합니다.

이 동작을 변경하려면 customFilter 속성을 설정합니다. 이 콜백은 각 항목이 현재 검색어와 일치하는지를 결정합니다.

히라가나, 가타카나 또는 반각 가나처럼 서로 다른 문자 형식을 동일한 값으로 처리해야 할 때 유용합니다.

customFilter&HighLight.gif

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

const ac = new input.AutoComplete('#theAutoComplete', {
  itemsSource: items,
  displayMemberPath: 'name',
  customFilter: (_item, query, text) => {
    return text.toLowerCase().includes(query.toLowerCase());
  }
});

customFilter가 설정된 경우 다음 사항이 적용됩니다.

  • caseSensitiveSearch, beginsWithSearch, isContentHtml과 같은 기본 제공 검색 옵션은 무시됩니다.

  • minLength, delay, maxItems 설정은 계속 적용됩니다.

  • true를 반환하면 해당 항목이 결과 목록에 포함됩니다.

  • false, null, undefined 또는 기타 falsy 값을 반환하면 해당 항목이 제외됩니다.

  • 콜백에서 예외가 발생하면 해당 항목은 일치하지 않는 것으로 처리됩니다.

itemsSourceFunction을 사용하여 드롭다운 내용을 제어하는 경우 customFilter는 적용되지 않습니다.

이 속성은 다음 컨트롤에서 지원됩니다.

  • AutoComplete

  • MultiAutoComplete

  • MultiSelect

  • MultiSelectListBox


사용자 지정 강조 표시

필터링된 항목이 드롭다운 목록에 표시되는 방식을 제어하려면 customHighlight 속성을 사용합니다.

이 콜백은 (item, query, text)를 인수로 받고, 항목을 렌더링하는 데 사용할 HTML 문자열을 반환합니다.

다음 예제에서는 항목 텍스트에서 처음 일치하는 범위를 강조 표시합니다.

import * as wjCore from '@mescius/wijmo';
import * as input from '@mescius/wijmo.input';

const ac = new input.AutoComplete('#theAutoComplete', {
  itemsSource: items,
  displayMemberPath: 'name',
  customHighlight: (_item, query, text) => {
    const safeText = wjCore.escapeHtml(text);

    if (!query) {
      return safeText;
    }

    const source = text.toLowerCase();
    const target = query.toLowerCase();
    const start = source.indexOf(target);

    if (start < 0) {
      return safeText;
    }

    const end = start + query.length;

    return [
      wjCore.escapeHtml(text.slice(0, start)),
      '<span class="wj-state-match">',
      wjCore.escapeHtml(text.slice(start, end)),
      '</span>',
      wjCore.escapeHtml(text.slice(end))
    ].join('');
  }
});

customHighlight가 설정된 경우 다음 사항이 적용됩니다.

  • 항목의 렌더링 방식만 제어합니다.

  • 필터링 로직에는 영향을 주지 않습니다.

XSS를 방지하려면 HTML을 반환하기 전에 사용자 입력이나 동적으로 생성된 콘텐츠를 항상 이스케이프해야 합니다. 예를 들어 escapeHtml을 사용할 수 있습니다.

사용자 지정 정규화가 필요한 경우 일치 여부와 강조 표시 결과가 일관되도록 customFilter와 customHighlight에 동일한 정규화 로직을 사용하십시오.