Δυναμική Αναζήτηση

Κάνε δυναμική και την αναζήτηση. Σαν κουμπί αναζήτησης βγάζεις το <form> search που έχει και βάζεις κάτι τέτοιο:

<div class="input-group mb-3">
        <input id="search-input" type="text" class="form-control" onkeyup="dynamicSearch()" placeholder="Search for products" name="dynamic-search" value="">
    </div>

Τρόπος 1 - JavaScript createElement

function dynamicSearch() {
        const tableBody = document.getElementById('tableBody');
        const searchInput = document.getElementById('search-input').value;

//και μετά στέλνεις το search input και απαντάς με την λίστα των αποτελεσμάτων την οποία με μια for στην απάντηση μπορείς να διαχειριστείς κάπως έτσι

tableBody.innerHTML = '';
for (const product of data) {
	const tableRow = document.createElement('tr');
	tableRow.id = 'product-' + product.id;
	// id
	const id = document.createElement('th');
	id.innerHTML = product.id;
	tableRow.appendChild(id);
	// image
	const image = document.createElement('img');
	image.src = product.image;
	image.className = 'display-image';
	const imageth = document.createElement('th');
	imageth.appendChild(image);
	tableRow.appendChild(imageth);
	// title
	const title = document.createElement('th');
	title.innerHTML = product.title;
	tableRow.appendChild(title);
	// price
	const price = document.createElement('th');
	price.innerHTML = product.price;
	tableRow.appendChild(price);
	// creation date
	const creationDate = document.createElement('th');
	creationDate.innerHTML = product.creation_date;
	tableRow.appendChild(creationDate);
	// buttons
	const action = document.createElement('td');
	const deleteButton = document.createElement('button');
	deleteButton.innerHTML = 'Remove';
	deleteButton.className = 'btn btn-danger';
	deleteButton.addEventListener('click', function() {
		deleteProduct(product.id);
	});
	const editButton = document.createElement('a');
	editButton.href = 'update.php?id=' + product.id;
	editButton.className = 'btn btn-outline-primary';
	editButton.innerHTML = 'Edit';
	action.appendChild(editButton);
	action.appendChild(deleteButton);
	tableRow.appendChild(action);
	tableBody.appendChild(tableRow);
}

---

Τρόπος 2 - Ένα Layout, Array με Rows, JavaScript Loop

1. Layout File (product_row.php)

<?php
// layouts/product_row.php
// Απλό template - δέχεται $product
?>
<tr id="product-<?= $product['id'] ?>">
    <th><?= $product['id'] ?></th>
    <th><img src="<?= $product['image'] ?>" class="display-image"></th>
    <th><?= htmlspecialchars($product['title']) ?></th>
    <th><?= $product['price'] ?></th>
    <th><?= $product['creation_date'] ?></th>
    <td>
        <a href="update.php?id=<?= $product['id'] ?>" class="btn btn-outline-primary">Edit</a>
        <button class="btn btn-danger" onclick="deleteProduct(<?= $product['id'] ?>)">Remove</button>
    </td>
</tr>

---

2. Search Endpoint (search.php)

<?php
// search.php
header('Content-Type: application/json');

$searchTerm = $_GET['q'] ?? '';

// Database query
$pdo = new PDO('mysql:host=localhost;dbname=mydb', 'user', 'pass');
$stmt = $pdo->prepare("SELECT * FROM products WHERE title LIKE ? OR description LIKE ?");
$stmt->execute(["%$searchTerm%", "%$searchTerm%"]);
$products = $stmt->fetchAll(PDO::FETCH_ASSOC);

// Φτιάξε array με HTML rows
$rows = [];
foreach ($products as $product) {
    ob_start();
    include 'layouts/product_row.php';
    $rows[] = ob_get_clean();
}

echo json_encode(['rows' => $rows]);
?>

---

3. JavaScript με forEach Loop

function dynamicSearch() {
    const searchInput = document.getElementById('search-input').value;
    const tableBody = document.getElementById('tableBody');

    fetch(`search.php?q=${encodeURIComponent(searchInput)}`)
        .then(response => response.json())
        .then(data => {
            // Σβήνουμε τα περιεχόμενα του table
            tableBody.innerHTML = '';

            // Loop με forEach και paste κάθε row
            data.rows.forEach(rowHTML => {
                tableBody.innerHTML += rowHTML;
            });
        });
}

---

Σημειώσεις:

• Χρησιμοποιείται PHP template rendering με ob_start() για κάθε row.
• Η JavaScript παίρνει τα rendered HTML rows και τα βάζει κατευθείαν στο tbody.
• Ο κώδικας είναι modular και καθαρός — εύκολα επεκτάσιμος.