How to add a custom search bar to your eleventy website with duckduckgo

October 19, 2022

A few weeks ago, I was sprucing up my website's "404 Not Found" page. I had seen some useful 404 pages that offered other web pages to check out instead of just a dead end. One addition I thought would be nice was a custom search bar. It turned out to be effortless with DuckDuckGo.

Customize results page

Duckduckgo offers several query parameters that affect the search results of the page. Go here to find the full list of query parameters.

Here are the parameters I'm interested in:

Each of these parameters can be represented by a hidden input within a form element as shown below.

<!-- src/partials/search-box.njk -->
<form action="https://duckduckgo.com/" method="GET">
  <input
    type="search"
    name="q"
    id="search-term"
    class="search-txt"
    autocomplete="off"
    placeholder="i.e. work experience" />
  <input
    aria-hidden="true"
    type="hidden"
    hidden
    name="sites"
    value="brianjdevries.com" />
  <input aria-hidden="true" type="hidden" hidden name="kx" value="#777777" />
  <input aria-hidden="true" type="hidden" hidden name="k7" value="#040404" />
  <input aria-hidden="true" type="hidden" hidden name="k8" value="#cccccc" />
  <input aria-hidden="true" type="hidden" hidden name="k9" value="#e03021" />
  <input aria-hidden="true" type="hidden" hidden name="ko" value="-2" />
  <input aria-hidden="true" type="hidden" hidden name="k1" value="-1" />
  <input aria-hidden="true" type="hidden" hidden name="kaa" value="#777777" />
  <button type="submit">Search</button>
</form>

Most of the input fields have a set value. Only the input type="search" element will take custom input (the search terms). All the hidden inputs will be appended to the form url as query parameters when the form is submitted.

The form appears as a simple text box with a search button.

Adding the form in eleventy

The above steps can be implemented on any website. To add the search bar to my eleventy site, I created a nunjucks template for it. It simply comtains the previous form element with all the inputs.

After that, simply include the template wherever you want it to render.

{% include "partials/search-box.njk" %}

Go ahead, give it a try!

Conclusion

Yes, it really is that easy. There are other ways to solve the onsite search problem, but this is my solution for now. I hope you found this helpful!

P.S. I also found a nifty tool that generates a duckduckgo search bar for you. Give it a try or create your own from scratch.

Thanks for reading! Shoot me an email with your thoughts or just to say hello.