Announcing commandk.js, a search dialog web component

Every so often, I am reminded of the Command + K (Control + K on Windows) design pattern. Command + K usually triggers a search dialog in which a user can enter a query. I have seen it in email clients, as a standalone application, and in web sites. Most recently, I saw Supabase had added a Command + K search to their documentation.

At the weekend, I wondered to myself "should I try and create a search bar triggered by Command + K?" I challenged myself to build a HTML Web Component that could be easily reused across different websites. This challenge was a key part of the learning experience for me. I dug deeper into web components this weekend and I wanted to build new things with them.

I am excited to announce that I now have a new search bar on this site. Press Command + K (Control + K on Windows) and then enter a search query. You'll see the names of each post that matches your query as well as the categories associated with those posts. The developer documentation for this project is live, too.

Here's an example showing the results of a query:

Implementation

The command bar generated by this project has three parts:

1. A HTML dialog box with a text input element. When a new character is typed into the input field, a function is called to conduct a search. That function is tasked with updating a blank <ul> below the text input element. The box has a button that closes the dialog box.
2. A Web Component built with JavaScript. This component inserts the dialog box into the page and handles the application logic: open the component when Command + K is pressed, define a function that, when called, opens the box (ideal for creating a link elsewhere on the page that makes the component pop up).
3. A <template> element that contains the CSS associated with the component.

I decided that the dialog box should call a function outside of the component. This was a conscious decision. I didn't want to pre-build search logic into this component, recognising there are many ways to do search and I want to give implementors flexibility when using the component. To implement search logic, implementors must define a searchFunction function that takes in the user's query and the shadow DOM root for the component. This function can do whatever the implementor wants.

The intent while building this web component was to use it on my website. I used this as an excuse to implement a new search functionality with Supabase, a tool I have wanted to learn more about for a while. My web component calls an endpoint on my site that queries Supabase and returns posts whose title contains the user's query. I use the Supabase ilike operator to conduct this search. If you are curious about how this search service works, you can read the source code on GitHub.

My web component calls this service, which returns an array of JSON objects. Each object contains:

1. A post title.
2. A URL.
3. The category associated with the post.

I then have some JavaScript that takes that information, creates list items for each object, and appends them to the <ul> element. My example is available on the landing page for this project. Feel free to copy it and adapt it to your needs should you be interested in using commandk.js with a network-bound search service. I also provided an example of an on-page search that searches through hard-coded JSON objects defined in a list and returns matching results.

To start using commandk.js on your own site, check out the installation and setup instructions on the project page. The project page itself contains a commandk.js demo, so feel free to dig around the source code to see how it works on the page. My blog search has now been replaced with this search feature. Click "Search" in the top-right corner or press Command / Control + K to get started.

Do you have any ideas on how this project could be improved? Feel free to start a discussion in the Issues section of the project GitHub repository. I'm excited to continue working on this project to provide an easy-to-use starter dialog for Command + K search functionalities on the web.

Tagged in web components, search.