Tôi đã xây dựng lại Command Palette Cmd-K chỉ với 60 dòng code

Các ứng dụng như Linear, Raycast và VS Code đều sử dụng command palette. Bạn nhấn ⌘K, gõ vài chữ cái và nhấn Enter. Cảm giác nó rất phức tạp, nhưng thực tế nó chỉ cần 60 dòng JavaScript.

Đây là cách bạn xây dựng nó:

  1. Bộ lắng nghe bàn phím (Keyboard Listener) Bạn cần một bộ lắng nghe toàn cục (global listener). Các trình duyệt thường dùng Ctrl+K để tìm kiếm. Bạn phải sử dụng preventDefault để ngăn chặn hành động này.
document.addEventListener("keydown", e => {
  if ((e.metaKey || e.ctrlKey) && e.key === "k") {
    e.preventDefault();
    openPalette();
  }
});
  1. Dữ liệu lệnh (Command Data) Lưu trữ mọi hành động dưới dạng một đối tượng (object). Giao diện (UI) sẽ luôn đơn giản. Nó liệt kê các đối tượng này và thực thi hàm mà bạn chọn. Thêm một tính năng mới chỉ đơn giản là thêm một dòng vào danh sách của bạn.
const COMMANDS = [
  { icon: "🌙", label: "Toggle dark mode", group: "Theme", run: toggleDark },
  { icon: "📄", label: "New file",         group: "File",  run: newFile },
];
  1. Tìm kiếm mờ (Fuzzy Search) Các command palette tốt thường sử dụng phương pháp khớp chuỗi con (subsequence matching). Điều này có nghĩa là các ký tự phải xuất hiện theo đúng thứ tự, nhưng không nhất thiết phải nằm cạnh nhau. Gõ "tgldk" sẽ tìm thấy "Toggle dark mode".
function fuzzy(q, text) {
  let i = 0;
  for (const ch of text.toLowerCase()) {
    if (ch === q[i]) i++;
  }
  return i === q.length;
}

  1. Điều hướng bằng bàn phím (Keyboard Navigation) Mục tiêu là để người dùng không cần dùng đến chuột. Sử dụng các phím mũi tên để thay đổi chỉ số lựa chọn (selection index). Nhấn Enter để thực thi lệnh. Nhấn Escape để đóng menu.

  2. Cảm giác tức thì (The Instant Feel) Hãy focus vào ô nhập liệu ngay khi command palette vừa mở. Điều này cho phép bạn gõ ngay lập tức mà không cần phải click chuột.

Một command palette cần bốn yếu tố:

Hãy thử xây dựng nó một lần để hiểu cách các công cụ dành cho người dùng chuyên nghiệp (power-user) hiện đại hoạt động.

Thử trực tiếp tại: https://dev48v.infy.uk/design/day10-command-palette.html

Nguồn: https://dev.to/dev48v/i-rebuilt-the-cmd-k-command-palette-in-60-lines-of-javascript-3a1l