Runtime Pipeline

From Raw Records to Live Browser Autocomplete

Learn how json-to-dom-datalist inspects your data arrays, computes frequency counts, generates json-to-dom element trees, and connects to your inputs.

The 5-Step Pipeline

[Data Array] + [Columns Spec] + [Config]
                    │
           1. DataListStore (Immutable state & active columns)
                    │
           2. groupBy (Extracts distinct values & frequency counts)
                    │
           3. DatalistBuilder (Builds declarative <datalist> & <option> JSON trees)
                    │
           4. DOM Mounting (Renders and attaches to container)
                    │
           5. Native Input Binding (<input list="col-datalist">)

1. Configuration & Setup

import { DataList } from "json-to-dom-datalist";

const dataList = new DataList({
  columns: [
    { key: "stockItemName", datalistId: "stock-list" },
    { key: "batchName", datalistId: "batch-list" }
  ],
  config: {
    datalist: { topN: 10 }
  },
  data: records,
  targetContainerId: "datalist-container"
});

await dataList.render();

2. HTML Input Integration

<!-- Simply set list="stock-list" on your input -->
<label>Stock Item:</label>
<input type="text" list="stock-list" placeholder="Type ROPE..." />

<label>Batch:</label>
<input type="text" list="batch-list" placeholder="Type Batch..." />

<!-- Datalists are mounted cleanly into this container -->
<div id="datalist-container"></div>

← Why Native Datalist Architecture →