Tasos Sangiotis

June 19, 2022

Simpler search using Turbo Frames

Yesterday I wrote about a search implementation using icontains filters.

It made me think of a simpler implementation on the HTMl side.

In the past couple of years "extensions" to HTML that are not a full JS frameworks are getting poppular. We use the Hotwire.

A useful feature of Hotiwire is that you can make a request through a form and inject the response in a predefined position in the body. Let's say a search box and its result 😉.

Assuming you setup a page for the results response:

<form class="form" role="search" action="/search" method="get"
    accept-charset="UTF-8" data-remote="true">
        type="search" autocomplete="off" spellcheck="false" 
        role="combobox" placeholder="Search" name="q"
        autofocus="autofocus" required="required" 
    <input type="submit" value="Search">

<turbo-frame role="listbox" id="search" target="_top">
    <span class="sr-only" role="option" aria-disabled="true">
        No matches yet

Using some javascript and css to submit on type on Mechbase:


About Tasos Sangiotis

An electrical engineer at Arpedon with a broad range of interests from electrical, to mechanical & automation. Photoshooter, runner and a fan of good food & alcohol. You can also find me on Twitter, on LinkedIn, and on Instagram. If you choose to wander this wasteland do so with caution. Consider this your final warning.