CI4 with htmx

CI4 + htmx for Dynamic UIs

// htmx swaps HTML partials without JavaScript
// app/Views/posts/list.php
<div id="posts-list">
    <?php foreach ($posts as $post): ?>
        <div class="post">
            <h3><?= esc($post["title"]) ?></h3>
            <button hx-delete="/posts/<?= $post["id"] ?>"
                    hx-target="closest .post"
                    hx-swap="outerHTML">
                Delete
            </button>
        </div>
    <?php endforeach ?>
</div>

// Search with htmx
<input hx-get="/posts/search" hx-trigger="keyup delay:300ms"
       hx-target="#posts-list" name="q" placeholder="Search...">

// Controller
public function search() {
    $q     = $this->request->getGet("q");
    $posts = model(PostModel::class)->like("title", $q)->findAll();
    return view("posts/_list_partial", ["posts" => $posts]);
}