Dynamisch zoeken

Als je zoekt naar iets zijn we tegenwoordig gewend om de resultaten direct te krijgen terwijl we aan het typen zijn. Als we dit voor elkaar willen krijgen dan is dat niet mogelijk door een formulier met een submitbutton te gebruiken.

We gaan nu stap voor stap een dynamisch zoekveld maken. We gebruiken voor deze code de tabel 'users' en we gaan er vanuit dat de kolommen email, voornaam, achternaam bestaan.

Stap 1

Zorg ervoor dat je header.view.php in de <head> de volgende scripts toevoegd

<script defer src="https://unpkg.com/alpinejs@3.x.x/dist/cdn.min.js"></script>
<script src="https://unpkg.com/axios@1.1.2/dist/axios.min.js"></script>

We maken een nieuwe directory 'api'. In deze directory komen controllers te staan die via een api worden aangeroepen.

Stap 2

In onze api directory maken we een bestand users.search.php met de volgende inhoud

<?php
//gebruik van database object
$db = new Database();

//we willen met like zoeken dus even % er voor en achter
$name = "%" . $_GET['name'] . "%"; 

//users opzoeken die aan onze zoek query voldoen en deze in $users zetten
$users = $db->query(
    "SELECT id, voornaam, achternaam, email 
           FROM users 
           WHERE voornaam LIKE ? 
              OR achternaam LIKE ? LIMIT 10", [
    $name, $name] //we hebben twee plekken waar we $name in moeten vullen
)->fetchAll();

// het resultaat geven we terug in json formaat
echo json_encode($users);

Stap 3

Aan onze router.php voegen we twee nieuwe routes toe

case "/users":
    require "view/users.zoeken.view.php";
    break;
case "/search-users":
    require "api/users.search.php";
    break;

Stap 4

We maken een bestand view/users.zoeken.view.php

<?php
require "parts/header.view.php";
require "parts/menu.view.php";
?>
    <h1 class="font-2xl font-bold m-10">Zoek users</h1>

    <div x-data="searchUsers()" class="m-10">
        Zoek gebruikers: <input type="text" @keyup="fetchUsers()" x-model="searchfield">
        <!-- indien er resultaten gevonden zijn dan tonen -->
        <template x-if="users.length">
            <table class="w-1/2">
                <tr>
                    <td class="font-bold">Email</td>
                    <td class="font-bold">Voornaam</td>
                    <td class="font-bold">Achternaam</td>

                </tr>
                <!-- Loop door alle gevonden users -->
                <template x-for="user in users">
                    <tr @click="goto(user.id)" class="hover:cursor-pointer hover:bg-blue-50">
                        <td x-text="user.email"></td>
                        <td x-text="user.voornaam"></td>
                        <td x-text="user.achternaam"></td>
                    </tr>
                </template>
            </table>
        </template>
        <!-- Geen resultaten -->
        <template x-if="!users.length">
            <div class="mt-10">Geen gebruikers gevonden</div>
        </template>
    </div>

    <script>

        function searchUsers() {
            return {
                searchfield: '', //inhoud van het zoekveld
                users: [], //dit wordt gevuld met de resultaten afkomstig van api/users.search.php
                ok: false, //gaat alles goed?

                fetchUsers() {
                    axios.get('/search-users?name=' + this.searchfield)
                        .then((response) => {
                            this.ok = true;
                            this.users = response.data;
                            setTimeout(() => {
                                this.ok = false;
                            }, 5000);

                        }).catch((e) => {
                        console.log(e);
                    })
                },
                goto(id) {
                    //Deze url bestaat nog niet maar kan je zelf aanmaken
                    location.href = '/user-profile?id=' + id;
                }
            }
        }

    </script>

<?php
require "parts/footer.view.php";

Je kan nu naar http://localhost/users navigeren en uitproberen.

Door gebruik van axios en alpinejs wordt ons zoekveld dynamisch. Lees de documentatie van alpinejs om de code beter te begrijpen. Of kijk een in een video hoe het werkt