🔍
json-renderers Datalist • CDN

Direct CDN Import Integration Guide

Method 1 • Direct CDN Import

How to Render HTML Datalist Using Direct CDN Import

Learn how to generate native HTML5 <datalist> elements directly from CDN imports into standard browser ES Modules without bundlers or npm installations.

💡 How It Works 📄 Code Walkthrough ⚡ Interactive CDN Demo 📂 Open samples/dataList1 →
Concept

The 3-Step CDN Datalist Story

1

1. Input with list=""

Create an input linked to an ID: <input list="cities-list" /> and a container for the datalist.

2

2. Import from CDN

Import the runtime from jsDelivr via native <script type="module">.

3

3. Mount & Enjoy Autocomplete

The datalist is injected into the container. The browser handles matching, dropdown menus, and arrow keys natively.

Implementation

Complete HTML Page Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <title>Datalist CDN Demo</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
</head>
<body class="p-4">

  <!-- 1. Input field linked to datalist ID -->
  <label class="form-label font-bold">Search Technology:</label>
  <input list="tech-suggestions" class="form-control mb-3" placeholder="Start typing (e.g., React)..." />

  <!-- 2. Target container for datalist -->
  <div id="datalist-output"></div>

  <!-- 3. Script importing directly from CDN -->
  <script type="module">
    import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";

    const suggestions = ["React", "Vue.js", "Angular", "Svelte", "Next.js", "Vite"];

    // Mount datalist element
    render({
      type: "datalist",
      data: suggestions,
      targetHtmlId: "datalist-output",
      showLog: true
    });
  </script>
</body>
</html>
Live Experience

Interactive CDN Demo & Code Generator

Ready

⌨️ Live Autocomplete Input

list="cdn-datalist-output"

Notice: The suggestions below are generated by the native browser UI.

Current Input Value: (Empty)
Execution Console Log 
Ready.
Active CDN Snippet 
Loading snippet...

This snippet matches your active suggestion list in real time.