‏rich-input؛ سرچ‌باکسی که فیلترها رو می‌فهمه

ادعای اصلی صفحهٔ rich-input اینه که هوشمندی فیلتر موتورهای جستجو رو میاره توی فرم‌های معمولی وب. کاربر توی همون یه فیلد، هم می‌تونه متن آزاد بنویسه هم فیلتر ساختاریِ کلید-مقدار مثل year:2026 یا label:"Warp Records". تکمیل خودکارش دو لایه‌ست: هم اسم کلیدواژه‌ها رو پیشنهاد می‌ده (با تایپ a می‌گه artist:) هم مقدارهای همون کلیدواژه رو.

نکتهٔ عملیِ کار اینه که پیکربندی کاملاً اعلانیه و هیچ جاوااسکریپتی نمی‌نویسی. کافیه تگ‌های استاندارد رو داخل خود کامپوننت بذاری: id هر datalist همون کلیدواژه‌ای می‌شه که توی جستجو تایپ می‌شه، label اسم نمایشیشه و data-type="number" فیلد عددی می‌سازه. مقدارهایی که فاصله دارن هم خودکار داخل گیومه می‌رن.

<rich-input placeholder="Search tracks, labels, artists...">
  <datalist id="label" label="Record Label">
    <option value="Keinemusik"></option>
    <option value="Warp Records"></option>
  </datalist>
  <datalist id="year" label="Release Year" data-type="number">
    <option value="2026"></option>
  </datalist>
</rich-input>

بخش فنی جالبش به دو API نسبتاً تازه برمی‌گرده. اولی OpaqueRange، یعنی APIای که اجازه می‌ده موقعیت دقیق یه تیکه متن داخل رو اندازه بگیری و از Chromium 152 به بعد اومده. کامپوننت با getBoundingClientRect() روی همون range، پنجرهٔ پیشنهادها رو سر جای شروع مقدار (مثلاً روی گیومهٔ باز) می‌چسبونه، نه جایی که مکان‌نما هی جابه‌جا می‌شه.

دومی CSS Custom Highlight API ـه که با شبه‌المان ::highlight() مقدار هر کلیدواژه رو مستقیم داخل خود input رنگ می‌کنه، بدون اون ترفند قدیمیِ گذاشتن یه div شبیه‌ساز روی فیلد. یعنی استایل رنگ‌آمیزی رو توی CSS معمولی سایتت می‌نویسی.

::highlight(label) {
  background-color: oklch(0.92 0.08 240);
  color: oklch(0.28 0.14 240);
}

برای مرورگرهایی که OpaqueRange ندارن ولی Custom Highlight API دارن (مثل Safari 17.2+ و Firefox 141+) خودش به یه عنصر [contenteditable] داخل shadow DOM سوئیچ می‌کنه و برای جای پنجرهٔ پیشنهادها از همون div مخفی کمک می‌گیره. جز این، formAssociated = true رو پیاده کرده تا با ارسال فرم، FormData و ریست فرم جور دربیاد، همهٔ اجزای داخلیش با ::part() قابل استایل‌دهیه، و متد getParsedQuery() خروجی ساختاریافتهٔ کوئری رو با توکن‌های تشخیص‌داده‌شده برمی‌گردونه.

نکات کلیدی:

• کلیدواژه‌ها و مقدارها فقط با تگ‌های تعریف می‌شن؛ صفر خط پیکربندی جاوااسکریپت
• موقعیت‌دهی پنجرهٔ پیشنهاد با OpaqueRange، که از Chromium 152 به بعد در دسترسه
• رنگی‌کردن مقدارها داخل خود input با ::highlight(keyword) و بدون div شبیه‌ساز
• فال‌بک خودکار به [contenteditable] در Safari 17.2+ و Firefox 141+
• formAssociated = true برای کار با فرم و FormData، به‌علاوهٔ تم‌دهی کامل با ::part()
• متد getParsedQuery() کوئری رو به شکل { raw, text, keywords, tokens } برمی‌گردونه