DEV Community: Blessing Chaumba

Eliminating Form Context-Switching: Hash-Cached AutoSuggest with Lazy Entity Fallbacks

Blessing Chaumba — Wed, 12 Aug 2026 10:23:08 +0000

When designing data-heavy business applications like ERPs, invoicing software, or CRM platforms, two distinct user experience bottlenecks routinely surface:

Massive Dropdown Lag: Standard HTML <select> elements with hundreds or thousands of <option> elements bloat the DOM, degrade browser memory, and create sluggish UI interactions.
Context-Switching Pain (Workflow Interruption): A user is halfway through creating a quote for a new prospect. They reach the "Customer" field, open the dropdown, and realize the customer doesn't exist in the database yet. Standard validation forces them to abandon the form, navigate to the "Customers" module, create the record, return to quotes, and start over.

To solve both issues, I built a lightweight Vanilla JS AutoSuggest library centered around two core principles: Hash-Reconciliation Option Caching and Non-Blocking Lazy Entity Creation.

Concept 1: Hash-Reconciliation Caching

Instead of sending network requests for every keystroke or downloading thousands of items every time a user focuses an input, the component uses hash verification:

 Client (AutoSuggest)                      Server Backend
  |                                              |
  |--- POST { hash: "a1b2c3" } ----------------->|
  |                                              |-- Check if options modified
  |<-- 200 OK { hasUpdate: false } --------------|   since "a1b2c3"
  |   (Use cached array for client filtering)    |

Upon focus, the component sends its last known dataset hash to the server.
If the database records haven't changed, the backend responds with a lightweight { hasUpdate: false }.
The component performs fast client-side array filtering (Array.prototype.filter) locally without downloading duplicate payloads.

Concept 2: Non-Blocking Lazy Entity Creation

To eliminate form abandonment during quote or invoice generation, the component decouples human-readable display values from foreign keys using a dual-input architecture:

<div class="suggest-container">
    <!-- Displays human-readable label -->
    <input type="text" name="customer_name" placeholder="Search or type customer name..." />

    <!-- Holds database Primary Key (e.g., customer_id) -->
    <input type="hidden" name="customer_id" />
</div>

How the Fallback Mechanism Works

                     +-------------------------------+
                     | User Types Customer Name      |
                     +---------------+---------------+
                                     |
                    /----------------+\
                   /                   \
      [ Selects Existing ]       [ Types Unlisted Name ]
                 |                         |
                 v                         v
       customer_id = "104"       customer_id = ""
       customer_name = "Acme"    customer_name = "New Co"
                 |                         |
                 +------------+------------+
                              |
                              v
             +---------------------------------+
             | Save Quotation Record           |
             | - customer_id: NULL (or 104)    |
             | - customer_name: "New Co"       |
             +---------------------------------+

Existing Customer Selected: The hidden input stores customer_id = 104, and the text input displays Acme Ltd.
New Customer Entered: The user simply types New Company Inc.. The hidden input remains empty (customer_id = ""), while the raw string is retained.
Database Submission: The quotation table saves customer_id = NULL and customer_name_fallback = "New Company Inc.".
Rendering & Lazy Linking: The quotation prints and renders normally using the fallback name. The user never had to stop mid-quote to register a customer profile. Later, when the customer profile is formally created, the backend can retroactively link customer_id across historical quotes.

Core JavaScript Implementation

Here is a simplified overview of how the component handles inputs, hashes, and loose text changes:

export class AutoSuggest {
    constructor(container, options = {}) {
        this.container = typeof container === 'string' 
            ? document.querySelector(container) 
            : container;

        this.input = this.container.querySelector('input[type="text"]');
        this.hiddenInput = this.container.querySelector('input[type="hidden"]');

        this.options = { onSelect: null, onLooseChange: null, ...options };
        this.cachedData = [];
        this.cachedHash = null;

        this.init();
    }

    async fetchOptions() {
        const endpoint = this.input.getAttribute('data-suggestion');
        if (!endpoint) return this.cachedData;

        // Post local hash to verify if server-side dataset updated
        const res = await fetch(endpoint, {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ hash: this.cachedHash })
        });

        const data = await res.json();
        if (data?.hasUpdate && Array.isArray(data.data)) {
            this.cachedHash = data.hash;
            this.cachedData = data.data;
        }

        return this.cachedData;
    }

    async handleInput(query) {
        // If query differs from last selected item, clear hidden ID
        if (query !== this.selectedLabel) {
            this.hiddenInput.value = '';
            if (this.options.onLooseChange) {
                this.options.onLooseChange(query);
            }
        }

        const dataSet = await this.fetchOptions();
        const searchTerm = query.toLowerCase().trim();
        const filtered = dataSet.filter(item => item.text.toLowerCase().includes(searchTerm));

        this.renderDropdown(filtered);
    }

    select(id, label) {
        this.selectedLabel = label;
        this.input.value = label;
        this.hiddenInput.value = id; // Set foreign key
        this.hideDropdown();

        if (this.options.onSelect) this.options.onSelect(id, label);
    }
}

Benefits Summary

Zero Input Blocking: Users complete forms smoothly without leaving the page.
Reduced Overhead: Hash reconciliation avoids re-downloading large option arrays on every keypress.
Clean Data Degradation: Database schema maintains explicit foreign keys (customer_id) while safely supporting fallback strings (customer_name).

GitHub Repository

Check out the source code, CSS styles, and full documentation on GitHub:

👉 https://github.com/bcngara/autosuggest-dropdown

Solving Shared Hosting SEO Constraints: Building a Lightweight PHP-to-Node Proxy Engine

Blessing Chaumba — Wed, 12 Aug 2026 09:26:07 +0000

When building online marketplaces or e-commerce platforms, two common architectural challenges often arise:

Hosting Constraints: Many affordable shared hosting environments (such as Hostinger) are optimized for PHP, but lack native support for running persistent Node.js processes or background web servers.
SEO Limitations of SPAs: Modern client-side Single Page Applications (SPAs) rely heavily on Client-Side Rendering (CSR). Search engine crawlers can struggle to index dynamic AJAX/Fetch content efficiently compared to pre-rendered HTML.

To bridge this gap without paying for expensive infrastructure upfront, I designed a hybrid PHP Edge Proxy Engine.

The Architecture

Instead of choosing between pure Server-Side Rendering (SSR) or a client-side SPA, the PHP proxy serves a dual purpose on the shared host:

Server-Side Markup Assembly (SSR for Crawlers): For initial page loads, the proxy intercepts incoming browser routes, fetches structured data payloads from the Node.js API behind the scenes via cURL, and injects that data into lightweight PHP templates.
Direct API Pass-Through: For dynamic actions (like search filtering, pagination, or form submissions), browser request paths starting with /api/ are forwarded directly to the Node backend as raw JSON.

        +-------------------------+
        |  Browser / SEO Crawler  |
        +------------+------------+
                     |
                     v
  +-------------------------------------+
  |       PHP Shared Host (Edge)        |
  |  - Router & Endpoint Interceptor    |
  |  - cURL Transport Layer             |
  |  - HTML Template Assembly (SSR)     |
  +------------------+------------------+
                     |
                     v  cURL / JSON
  +-------------------------------------+
  |       Node.js Backend (Render)      |
  |  - Business Logic & Database Layer  |
  +-------------------------------------+

Core Code Implementation

1. Route Configuration (`config.php`)

<?php
declare(strict_types=1);

define('API_ENDPOINT', '[https://api.yourdomain.com/api](https://api.yourdomain.com/api)');
define('PROXY_PREFIX', '/api/');
define('TEMPLATES_DIR', __DIR__ . '/templates/');

define('ROUTES', [
    '/'          => ['landing', 'public/landing-page', 'GET'],
    '/search'    => ['search', 'public/search-items', 'GET'],
    '/product/$' => ['product-detail', 'public/get-product', 'GET'],
]);

2. cURL Transport Layer (`Api.php`)

<?php
declare(strict_types=1);

namespace App;

class Api {
    public function get(string $path, array $params = []): array {
        $queryString = http_build_query($params);
        $fullPath = $queryString ? $path . '?' . $queryString : $path;
        return $this->request($fullPath, 'GET');
    }

    public function post(string $path, array $data = []): array {
        return $this->request($path, 'POST', $data);
    }

    private function request(string $path, string $method, array $data = []): array {
        $requestUrl = rtrim(API_ENDPOINT, '/') . '/' . ltrim($path, '/');
        $ch = curl_init($requestUrl);

        curl_setopt_array($ch, [
            CURLOPT_RETURNTRANSFER => true,
            CURLOPT_CUSTOMREQUEST  => $method,
            CURLOPT_HTTPHEADER     => ['Content-Type: application/json'],
            CURLOPT_CONNECTTIMEOUT => 3,
            CURLOPT_TIMEOUT        => 10,
        ]);

        if ($method === 'POST') {
            curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
        }

        $response = curl_exec($ch);
        $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE);
        $curlError = curl_error($ch);
        curl_close($ch);

        if ($curlError) {
            throw new \Exception("Transport Error: $curlError");
        }

        return json_decode((string)$response, true) ?? [];
    }
}

3. Router & Interceptor (`Router.php`)

<?php
declare(strict_types=1);

namespace App;

class Router {
    private Api $api;

    public function __construct() {
        $this->api = new Api();
    }

    public function dispatch(): void {
        $rawUri = $_SERVER['REQUEST_URI'];
        $path = parse_url($rawUri, PHP_URL_PATH) ?? '/';
        $method = $_SERVER['REQUEST_METHOD'];

        // Direct API Proxy Pass-Through
        if (str_starts_with($path, PROXY_PREFIX)) {
            $this->proxyDirect($rawUri, $method);
            return;
        }

        // Resolve SSR Route
        $route = $this->resolveRoute($path, $method);
        if (!$route) {
            http_response_code(404);
            echo "404 - Page Not Found";
            return;
        }

        [$template, $apiEndpoint] = $route;

        try {
            $params = array_merge($_GET, $_POST);
            $apiData = $apiEndpoint ? $this->api->get($apiEndpoint, $params) : [];

            extract($apiData);
            require TEMPLATES_DIR . $template . '.php';
        } catch (\Exception $e) {
            http_response_code(500);
            echo "Server Error: " . $e->getMessage();
        }
    }

    private function resolveRoute(string $path, string $method): ?array {
        if (isset(ROUTES[$path]) && ROUTES[$path][2] === $method) {
            return ROUTES[$path];
        }

        foreach (ROUTES as $pattern => $config) {
            if (str_contains($pattern, '$') && $config[2] === $method) {
                $regex = '^' . str_replace('$', '([^/]+)', $pattern) . '$';
                if (preg_match("#$regex#", $path, $matches)) {
                    $_GET['slug'] = $matches[1];
                    return $config;
                }
            }
        }
        return null;
    }

    private function proxyDirect(string $rawUri, string $method): void {
        header('Content-Type: application/json');
        $backendPath = str_replace(PROXY_PREFIX, '/', $rawUri);
        $params = array_merge($_GET, $_POST);

        try {
            $response = ($method === 'POST')
                ? $this->api->post($backendPath, $params)
                : $this->api->get($backendPath, $params);

            echo json_encode($response);
        } catch (\Exception $e) {
            http_response_code(500);
            echo json_encode(['error' => $e->getMessage()]);
        }
    }
}

Key Benefits

Zero Additional Hosting Costs: Run your frontend on inexpensive PHP shared hosting while hosting Node.js services on cloud tiers like Render.
Instant SEO Indexing: Crawlers receive fully populated HTML on the initial page load without requiring third-party headless browser pre-rendering tools.
Clean Decoupling: Business logic remains in Node.js, while PHP acts strictly as an edge routing and proxy layer.

Code Repository

Check out the full working reference implementation on GitHub:
https://github.com/bcngara/php-node-seo-proxy