Korean initial consonant search

Search Korean text by its initial consonants: ㄱㅎ finds 김하늘, in filters, the filter row, the quick search, the find bar, set-list search, the column chooser and editors.

Live demoKorean initials

Type ㄱㅎ in any search box.

Code for this demo

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;
}

Korean users often search with the first consonant of each syllable, as on phones. Wherever FreeGrid searches text, a consonant in the search (ㄱ–ㅎ) matches any syllable that starts with it, so ㄱㅎㄴ finds 김하늘 and ㅅㅇ finds 서울.

How it matches

Search	Finds	Why
ㄱㅎㄴ	김하늘	Every consonant matches the start of a syllable in a row
박ㅅ	박서준	Full syllables and consonants mix
ㅅㅇ	서울, 서울시, 수원 …	Anywhere in the text (contains)
ㄱ*늘	김하늘	Wildcards understand consonants too
ㄲ	까치 (not 가치)	Double consonants are their own

Where it works

Column filters: Contains, Does not contain, Starts with, Matches (* ?).
The filter row text boxes.
The quick search (setQuickFilter).
The find bar (Ctrl+F) and find().
The search box of a set filter list, and of the column chooser.
The combo editor list and the multi-select editor search.

grid.setQuickFilter('ㄱㅎㄴ');                                        // rows with 김하늘
grid.setFilter('name', { type: 'text', op: 'startsWith', value: 'ㅂ' });  // names starting with ㅂ
grid.find('ㅅㅇ');                                                     // highlight 서울 cells

Equals, Is one of and regular expressions compare letters as they are; initials apply to the searching operators above. With a datasource the search text is sent to your server unchanged, so initial search there depends on your server.

Questions about this page

Does FreeGrid support Korean chosung (initial consonant) search?

Yes, everywhere you search: column filters, the filter row, the quick search, the find bar, set-list and column chooser search boxes, and the combo and multi-select editors. Consonants and full syllables can be mixed (박ㅅ).