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:
The command bar generated by this project has three parts:
- 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.
<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:
- A post title.
- A URL.
- The category associated with the post.
<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.
Comment on this post
Respond to this post by sending a Webmention.
Have a comment? Email me at firstname.lastname@example.org.