FreeGridv1.15.1English

한글 초성 검색

한글을 초성으로 검색: ㄱㅎ으로 김하늘을 찾습니다. 필터, 필터 행, 빠른 검색, 찾기 창, 값 목록 검색, 컬럼 선택, 편집기 목록에서 됩니다.

실행 예제초성 검색

아무 검색칸에나 ㄱㅎ을 입력해 보세요.

이 데모의 코드
import { createGrid, type ColumnDef, type Row } from '@freegridjs/core';
import { makeRows } from '../data';
import { button, separator, text, tr, type DemoContext } from '../ui';

const NAMES = ['김하늘', '박서준', '이도윤', '최유나', '정민호', '강서연', '조현우', '윤지아', '장하은', '임지호'];
const CITIES = ['서울', '부산', '인천', '대구', '대전', '광주', '수원'];
export default function mount(ctx: DemoContext) {
  const h = (en: string, ko: string) => tr(ctx.lang, { en, ko });
  const data = makeRows(300).map((r, i) => ({ ...r, kname: NAMES[i % NAMES.length], city: CITIES[i % CITIES.length] }));
  const grid = createGrid(ctx.host, {
    columns: [
      { field: 'kname', header: h('Name (Korean)', '이름'), width: 140 },
      { field: 'city', header: h('City', '도시'), width: 120, editable: true, editor: { type: 'combo', options: CITIES } },
      { field: 'company', header: h('Company', '회사'), width: 160 },
    ],
    data, locale: ctx.lang, filterRow: true,
  });
  const q = document.createElement('input');
  q.placeholder = h('Quick search: ㄱㅎ, ㅅㅇ, 박ㅅ', '빠른 검색: ㄱㅎ, ㅅㅇ, 박ㅅ');
  q.addEventListener('input', () => { grid.setQuickFilter(q.value); ctx.log(`quick "${q.value}" → ${grid.getDisplayedRowCount()} rows`); });
  ctx.controls.append(q);
  separator(ctx);
  button(ctx, h('Find ㅅㅇ (Ctrl+F)', 'ㅅㅇ 찾기 (Ctrl+F)'), () => ctx.log(`find → ${grid.find('ㅅㅇ')} cells`));
  text(ctx, h('Type initials in the quick search, the filter row, Ctrl+F, or the city combo list.', '빠른 검색, 필터 행, Ctrl+F, 도시 콤보 목록에 초성을 입력해 보세요.'));
  return grid;
}

휴대폰에서처럼 각 글자의 첫 자음으로 검색하는 일이 많습니다. FreeGrid가 글자를 찾는 곳이면 어디서나 검색어의 자음(ㄱ~ㅎ)이 그 자음으로 시작하는 글자와 맞으므로, ㄱㅎㄴ으로 김하늘을, ㅅㅇ으로 서울을 찾습니다.

맞추는 규칙

검색어찾는 값이유
ㄱㅎㄴ김하늘자음마다 이어진 글자의 첫소리와 맞음
박ㅅ박서준완성 글자와 자음을 섞을 수 있음
ㅅㅇ서울, 서울시, 수원 …글자 어디에 있어도(포함)
ㄱ*늘김하늘패턴(*)에서도 자음이 통함
ㄲ까치(가치는 아님)쌍자음은 따로 봄

되는 곳

  • 컬럼 필터: 포함, 포함하지 않음, 시작 문자, 패턴 일치(* ?).
  • 필터 행 텍스트 칸.
  • 빠른 검색(setQuickFilter).
  • 찾기 창(Ctrl+F)과 find().
  • 값 목록 필터와 컬럼 선택 창의 검색칸.
  • 콤보 편집기 목록과 여러 값 선택 편집기 검색.
grid.setQuickFilter('ㄱㅎㄴ');                                        // rows with 김하늘
grid.setFilter('name', { type: 'text', op: 'startsWith', value: 'ㅂ' });  // names starting with ㅂ
grid.find('ㅅㅇ');                                                     // highlight 서울 cells

같음, 다음 중 하나, 정규식은 글자를 그대로 비교하고, 초성은 위의 검색 연산에 적용됩니다. datasource일 때는 검색어가 그대로 서버로 가므로 서버의 처리에 따릅니다.

이 페이지에 대한 질문

FreeGrid는 한글 초성 검색을 지원하나요?

네, 검색하는 모든 곳에서 됩니다: 컬럼 필터, 필터 행, 빠른 검색, 찾기 창, 값 목록·컬럼 선택 검색칸, 콤보·여러 값 선택 편집기. 초성과 완성 글자를 섞어 쓸 수도 있습니다(박ㅅ).