Hyperscript - Interactively Searching Web Content!

In this video, we'll see how to search web content interactively using Hyperscript.

This is useful if you have a list, table or any set of elements, and you want to filter or search these based on some user input.

☕️ 𝗕𝘂𝘆 𝗺𝗲 𝗮 𝗰𝗼𝗳𝗳𝗲𝗲:
To support the channel and encourage new videos, please consider buying me a coffee here:

𝗦𝗼𝗰𝗶𝗮𝗹 𝗠𝗲𝗱𝗶𝗮:

📚 𝗙𝘂𝗿𝘁𝗵𝗲𝗿 𝗿𝗲𝗮𝗱𝗶𝗻𝗴 𝗮𝗻𝗱 𝗶𝗻𝗳𝗼𝗿𝗺𝗮𝘁𝗶𝗼𝗻:

#webdevelopment #htmx

[geetcyberlab]

Am still waiting for the Banking API dev tutorial using Django-Ninja..❤🎉😊😊😊 thanks for the great work.

[geetcyberlab]

🎉 Happy New years ⛄ thanks for making my Job easy through your tutorials...

[AmoahDevLabs]

Great. Sprinkling favours onto hml is really useful.

[seydinaoumarsamabaly]

Wow another easy way to do it. Just awsome, thank you for all Mate and Happy New Year 2024.

[myoji]

This method seems to be a simple way to process requests without having to process them from the client to the server.
I think it is a disadvantage because it does not search all data because it searches only the content that the client already has. I think you need to use HTMX to communicate with the server to actually get the data you want.
Also, the example only has less than 10 lines of data, so I have doubts about how to use it. Also, the content on pages 1, 2, and 3 cannot be loaded, so it seems to have limited use.
In what environment is it best to use it? Could you explain how it compares to HTMX?

[IbrahimFox]

Thanks, your tutorials are great as always!

[skyagnitti]

Excellent video! I've been learning fastapi, sqlmodel and htmx basically from your videos and they are extremely well done. Do you have the code for this page? love the select section on the right of the table but can't seem to figure that out. also I'm trying to work on the search going through only one column not the entire table. Keep up the great work bro!

[MarkusGlavind]

Could this be implemented in a form? So a select field where you search for objects in a datalist?

[eduardabramovich]

please create a series of tutorials on writing a simple app with hyperscript. something like a portfolio or whatever you like.

[Peterstavrou]

Another incredible video! An advanced Hyperscript video would be handy 😉

[Dogo.R]

functional lisp version:
search field:
(on textchange (filter #table my-value))

clear button:
(set #search "")

defn textchange: ...

defn filter: ...

defn set: ...

defn on: ...

Presumably some of these functions would be included, rather than you writting them yourself.

But this allows for less coupling and easier readability.
You also get free reusabily in the proccess.

That example is an abomination in terms of decoupling and locality of behavior.
I mean technically the behavior seems local.
But to understand the full behavior you have to cross reference the other parts. So its not actually local.
Unlike the version I showed, where things are decoupled and you dont need to look at the search field's code in order to understand what "trigger keyup on #search" does.

[repotranstech]

Will it work with paginated html data in django eg data in page 2.

[alexdin]

please can you make videos about Htmx + django-filter