Tasos Sangiotis

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">
    <input 
        type="search" autocomplete="off" spellcheck="false" 
        role="combobox" placeholder="Search" name="q"
        autofocus="autofocus" required="required" 
        pattern=".*\S.*">
    <input type="submit" value="Search">
</form>

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

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

Search example

Comment details and information

To make a comment, please send an e-mail using the button below. Your e-mail address won't be shared and will be deleted from my records after the comment is published. If you don't want your real name to be credited alongside your comment, please specify the name you would like to use. If you would like your name to link to a specific URL, please share that as well. Thank you.