/** @jsxImportSource npm:hono/jsx **/ import { html, raw } from "npm:hono/html"; import { Hono } from "npm:hono@4.2.6"; // import val sqlite import { sqlite } from "https://esm.town/v/std/sqlite"; const app = new Hono(); const title = "Click Button Demo"; const View = ({ rows }) => { // create search form // create html table from all rows return ( {html` `}

{title}

Start Demo

Search:{" "} {rows.map((row) => ( ))}

ID	Name	Email	Message
{row[0]}	{row[1]}	{row[2]}	{row[3]}

); }; app.get("/", async (c) => { // get all sql lite messages as rows but filter if name is "undefined" const select = `SELECT * FROM messages WHERE name != 'undefined' LIMIT 10`; const result = await sqlite.execute(select); // console.log(result); const rows = result.rows; console.log(rows); // pass all // rows to the view return c.html(); }); const Clicked = () => { return

Finish Demo

; }; app.post("/clicked", (c) => { return c.html(); }); // create POST to handle search form input // filter messages table using LIKE on message table app.post("/search", async (c) => { // get post parameters: {"search": } const body = await c.req.parseBody(); console.log(body); const search = body["search"]; console.log(search); // check if search is empty let selectQuery = `SELECT * FROM messages WHERE message LIKE '%${search}%' AND name != 'undefined' LIMIT 10`; console.log(selectQuery); const result = await sqlite.execute(selectQuery); console.log(result); const rows = result.rows; return c.html( {rows.map((row) => ( {row[0]} {row[1]} {row[2]} {row[3]} ))} , ); }); export default app.fetch;

searchmessages