Project — Autocomplete Suggesters

နားလည်ထားရမယ့် အချက်

Lesson 6 ကနေစပြီး learn ခဲ့တဲ့ `match` query ဟာ user ရဲ့ full search term ကို analyze ပြီးမှ document တွေကို ရှာပေးတာဖြစ်ပြီး—user စာလုံး တစ်လုံးတစ်ချက်ချင်း ရိုက်နေချိန် ("re", "red", "redi"...) real-time responsive ဖြစ်ဖို့ optimize လုပ်ထားတာ မဟုတ်ပါ။ Autocomplete/search-as-you-type UX ကို implement ဖို့ Elasticsearch မှာ approach နှစ်မျိုးရှိပါတယ်—(1) `completion` suggester: dedicated data structure (in-memory FST—finite state transducer) ကို suggestion field များအတွက်သီးသန့် ကြိုတည်ဆောက်ထားပြီး prefix match ကို extremely fast (millisecond အောက်) ပေးနိုင်ပေမယ့် setup ကနည်းငယ် specialized (`type: completion` mapping, structured input format) ဖြစ်ပါတယ်—(2) `search_as_you_type` field type: text field ကို edge n-gram (prefix substring) များအဖြစ် index ချချိန်မှာပဲ pre-compute ထားလို့ regular `match_bool_prefix` query နဲ့ query လုပ်နိုင်ပြီး `completion` suggester လောက် raw speed မမြန်ပေမယ့် setup ရိုးရှင်းပြီး regular field တွေနဲ့ ပေါင်းသုံးရလွယ်ကူပါတယ်။ ဒီ site ရဲ့ SearchAutocomplete feature (memory ထဲ local JSON index ကို client-side filter လုပ်ထားတာ) ဟာ tutorial count နည်းငယ်ရှိတဲ့အချိန်မှာတော့ instant ဖြစ်ပေမယ့် tutorial count တိုးလာလေ (Elasticsearch course ကလည်း ဒီ tutorial 25 ခုထဲ တစ်ခုအပါအဝင်ဖြစ်လာမယ်) client-side JSON payload ကြီးလာလေ initial load time ကိုပါ ထိခိုက်လာနိုင်ပါတယ်—ဒီအစား server-side Elasticsearch suggester ကနေ query တစ်ခုစီမှာ small candidate list တစ်ခုချင်းသာ ပြန်ပို့ပေးရင် client-side payload size ကို constant အနေနဲ့ ထားနိုင်ပါတယ်—ဒီ project ဟာ ဒီ site ကိုယ်တိုင်ရဲ့ real feature ကို production-grade backend ပေါ် transplant လုပ်တာ ဖြစ်ပါတယ်။

လက်တွေ့ scenario နဲ့ ချိတ်ကြည့်မယ်

Tutorial Platform ရဲ့ search box ကို `search_as_you_type` field type (`titleSuggest`) ဖြင့် implement မယ်—`title` field ကို regular `text` mapping ဘေးမှာ `titleSuggest` sub-field တစ်ခု ထပ်ထည့်ပြီး `match_bool_prefix` query ဖြင့် user ရိုက်နေတဲ့ keystroke တစ်ခုစီအတွက် request ပို့မယ်—response candidate count ကို `size: 5` လောက်ထား limit ချထားမယ် (dropdown UI ကို overflow မဖြစ်စေချင်လို့)။ Frontend ဘက်မှာ debounce (ဥပမာ 150ms) ထည့်ထားမယ်—keystroke တိုင်းအတွက် request ချက်ချင်းပို့ရင် unnecessary load ဖြစ်နိုင်ပါတယ်။ ရှိပြီးသား client-side local JSON SearchAutocomplete component ကို ဒီ server-side endpoint ကို ခေါ်တဲ့ version နဲ့ replace မယ်—UX ကတော့ user အနေနဲ့ ခြားနားချက် မမြင်ရသလောက် ဆက်တူပါမယ်။

completion suggester = FST-based, extremely fast prefix match, specialized setup
search_as_you_type = edge n-gram pre-computed, simpler, regular query pattern
Site ရဲ့ client-side JSON autocomplete ကို server-side suggester ဖြင့် scale-friendly ပြောင်း

အတူတူ စမ်းရေးကြည့်မယ်

typescript

// Mapping addition
// "titleSuggest": { "type": "search_as_you_type" }

async function suggestTitles(prefix: string) {
  const result = await esClient.search({
    index: 'tutorials',
    size: 5,
    query: {
      match_bool_prefix: { titleSuggest: prefix },
    },
  });
  return result.hits.hits.map((hit) => (hit._source as { title: string }).title);
}

// debounce on the client before calling this per keystroke

You should see

User က "redi" ရိုက်ထည့်တာနဲ့ "Redis Basics", "Redis Caching Strategies" လို candidate titles 5 ခုအောက် dropdown list ရမည်။

၅ မိနစ် စမ်းကြည့်

`completion` suggester approach ကိုသုံးရင် mapping ကို ဘယ်လို ပြောင်းရမလဲ (field type, input format) ရေးပြီး `search_as_you_type` approach နှင့် setup complexity ကို နှိုင်းယှဉ်ရေးပါ။

သတိလေးတစ်ချက်

Keystroke တစ်ခုစီအတွက် debounce မထည့်ဘဲ request ချက်ချင်းပို့ခြင်း—user တစ်ယောက်တည်း typing လုပ်ရုံနဲ့ Elasticsearch cluster ကို request အများကြီး unnecessary load ဖြစ်စေနိုင်ပါတယ်။

Autocomplete response candidate count ကို limit မထားဘဲ (`size` default) ပြန်ပေးခြင်း—dropdown UI ထဲ result အလွန်များနေရင် user experience ဆိုးသွားပြီး response payload လည်း unnecessary ကြီးလာပါတယ်။

Elasticsearch Guide — Search-as-You-Type — Elastic