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:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

About Me

My name is Tasos Sangiotis and I work at Arpedon, an engineering company. This website is a collection of posts, essays and photos. They are mainly about travel, food and technical stuff. Occasionally I shoot photos. They are mostly on Instagram. If you choose to wander this wasteland do so with caution. Consider this your final warning. To contact me use [email protected]