json-renderers 1.18.8 → 1.20.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/docs/dist/min.js +523 -513
- package/docs/dist/v18/min.js +2049 -2049
- package/docs/dist/v19/min.js +2054 -0
- package/docs/dist/v20/min.js +2059 -0
- package/docs/samples/datalist/windowks.html +350 -350
- package/docs/samples/select/windowks.html +358 -358
- package/package.json +2 -1
- package/src/index.js +2 -2
- package/src/v19/buildSpec/index.js +28 -0
- package/src/v19/index.js +35 -0
- package/src/{v16 → v19}/meta.js +1 -1
- package/src/v19/registerGlobal.js +16 -0
- package/src/v19/renderToDom/index.js +47 -0
- package/src/v20/buildSpec/index.js +28 -0
- package/src/v20/index.js +41 -0
- package/src/{v15 → v20}/meta.js +1 -1
- package/src/v20/registerGlobal.js +16 -0
- package/src/v20/renderToDom/index.js +47 -0
- package/src/v14/buildSpec/index.js +0 -39
- package/src/v14/index.js +0 -81
- package/src/v14/meta.js +0 -6
- package/src/v14/registerGlobal.js +0 -14
- package/src/v15/buildSpec/index.js +0 -39
- package/src/v15/guard.js +0 -35
- package/src/v15/index.js +0 -70
- package/src/v15/registerGlobal.js +0 -14
- package/src/v16/buildSpec/index.js +0 -40
- package/src/v16/common/deriveColumnsFromData.js +0 -20
- package/src/v16/guard.js +0 -38
- package/src/v16/index.js +0 -106
- package/src/v16/registerGlobal.js +0 -27
- /package/src/{v14 → v19}/common/deriveColumnsFromData.js +0 -0
- /package/src/{v15 → v20}/common/deriveColumnsFromData.js +0 -0
|
@@ -1,350 +1,350 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
|
|
4
|
-
<head>
|
|
5
|
-
<meta charset="UTF-8" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
-
<title>window.ks.jsonRenderers.renderToDom | Datalist Guide</title>
|
|
8
|
-
<meta name="description"
|
|
9
|
-
content="Simple guide explaining how window.ks.jsonRenderers.renderToDom works to build and render HTML datalists from JSON data." />
|
|
10
|
-
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
12
|
-
<link
|
|
13
|
-
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
14
|
-
rel="stylesheet" />
|
|
15
|
-
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
16
|
-
<script src="https://cdn.tailwindcss.com"></script>
|
|
17
|
-
<style>
|
|
18
|
-
body {
|
|
19
|
-
font-family: 'Inter', sans-serif;
|
|
20
|
-
background-color: #ffffff;
|
|
21
|
-
color: #1e293b;
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
pre,
|
|
25
|
-
code {
|
|
26
|
-
font-family: 'Fira Code', monospace;
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
.demo-input {
|
|
30
|
-
width: 100%;
|
|
31
|
-
padding: 0.75rem 1rem;
|
|
32
|
-
font-size: 0.95rem;
|
|
33
|
-
border-radius: 0.75rem;
|
|
34
|
-
border: 1.5px solid #cbd5e1;
|
|
35
|
-
background-color: #ffffff;
|
|
36
|
-
color: #0f172a;
|
|
37
|
-
transition: all 0.2s ease;
|
|
38
|
-
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
39
|
-
}
|
|
40
|
-
|
|
41
|
-
.demo-input:focus {
|
|
42
|
-
outline: none;
|
|
43
|
-
border-color: #7c3aed;
|
|
44
|
-
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
|
|
45
|
-
}
|
|
46
|
-
</style>
|
|
47
|
-
</head>
|
|
48
|
-
|
|
49
|
-
<body class="bg-white min-h-screen flex flex-col antialiased text-slate-800">
|
|
50
|
-
|
|
51
|
-
<!-- Navigation Bar -->
|
|
52
|
-
<header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
|
|
53
|
-
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
54
|
-
<div class="flex items-center gap-3">
|
|
55
|
-
<a href="../index.html"
|
|
56
|
-
class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center font-bold text-white shadow-sm text-base hover:scale-105 transition">
|
|
57
|
-
🔍
|
|
58
|
-
</a>
|
|
59
|
-
<div>
|
|
60
|
-
<a href="../index.html"
|
|
61
|
-
class="text-sm font-bold text-slate-900 hover:text-purple-600 transition">json-renderers</a>
|
|
62
|
-
<span class="text-xs text-slate-500 block">Datalist • window.ks Guide</span>
|
|
63
|
-
</div>
|
|
64
|
-
</div>
|
|
65
|
-
|
|
66
|
-
<nav class="flex items-center gap-2 text-xs sm:text-sm">
|
|
67
|
-
<a href="../index.html"
|
|
68
|
-
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Samples Hub</a>
|
|
69
|
-
<a href="index.html"
|
|
70
|
-
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Datalist Hub</a>
|
|
71
|
-
<a href="cdn.html"
|
|
72
|
-
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Using CDN</a>
|
|
73
|
-
<a href="windowks.html"
|
|
74
|
-
class="px-3 py-1.5 rounded-lg bg-purple-600 text-white font-semibold shadow-sm transition">window.ks</a>
|
|
75
|
-
</nav>
|
|
76
|
-
</div>
|
|
77
|
-
</header>
|
|
78
|
-
|
|
79
|
-
<!-- Main Content -->
|
|
80
|
-
<main class="flex-1 max-w-5xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-8">
|
|
81
|
-
|
|
82
|
-
<!-- Document Header -->
|
|
83
|
-
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-3">
|
|
84
|
-
<div
|
|
85
|
-
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-50 border border-purple-200 text-xs font-mono text-purple-700 font-medium">
|
|
86
|
-
Global Window Object Guide • Datalist Component
|
|
87
|
-
</div>
|
|
88
|
-
<h1 class="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
|
|
89
|
-
window.ks.jsonRenderers.renderToDom
|
|
90
|
-
</h1>
|
|
91
|
-
<p class="text-slate-600 text-sm sm:text-base leading-relaxed">
|
|
92
|
-
Understand how <code
|
|
93
|
-
class="text-purple-700 bg-purple-50 px-1 py-0.5 rounded font-mono font-medium">window.ks.jsonRenderers.renderToDom</code> dynamically generates and attaches native browser autocomplete datalists across multi-input forms.
|
|
94
|
-
</p>
|
|
95
|
-
</section>
|
|
96
|
-
|
|
97
|
-
<!-- Why Use window.ks (The Story) -->
|
|
98
|
-
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
99
|
-
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
100
|
-
<span>📖</span> The Story: Why Use Global window.ks for Datalists?
|
|
101
|
-
</h2>
|
|
102
|
-
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
103
|
-
Complex ERP forms, invoice screens, and data entry workflows often contain multiple input fields that require search suggestions (e.g. Ledger Name, Currency, Branch, Cost Center). Rather than initializing separate autocomplete libraries or repeating module imports, <code class="text-purple-700 font-mono font-semibold">window.ks</code> provides a single, unified global engine.
|
|
104
|
-
</p>
|
|
105
|
-
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2">
|
|
106
|
-
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
107
|
-
<div class="text-purple-700 font-bold text-sm">Native Autocomplete</div>
|
|
108
|
-
<p class="text-xs text-slate-600">Zero extra kilobytes of JS widgets—uses native browser suggestion popovers.</p>
|
|
109
|
-
</div>
|
|
110
|
-
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
111
|
-
<div class="text-purple-700 font-bold text-sm">Centralized Runtime</div>
|
|
112
|
-
<p class="text-xs text-slate-600">Call <code class="font-mono">window.ks.jsonRenderers.renderToDom</code> for each input list across the page.</p>
|
|
113
|
-
</div>
|
|
114
|
-
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
115
|
-
<div class="text-purple-700 font-bold text-sm">Keyboard Friendly</div>
|
|
116
|
-
<p class="text-xs text-slate-600">Native arrow key navigation, enter selection, and mobile-responsive keyboards.</p>
|
|
117
|
-
</div>
|
|
118
|
-
</div>
|
|
119
|
-
</section>
|
|
120
|
-
|
|
121
|
-
<!-- How It Works & Code Example -->
|
|
122
|
-
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
123
|
-
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
124
|
-
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
125
|
-
<span>⚙️</span> Complete Implementation Code
|
|
126
|
-
</h2>
|
|
127
|
-
<button onclick="copyCode('ks-datalist-code')"
|
|
128
|
-
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-mono font-medium transition flex items-center gap-1.5 border border-slate-300">
|
|
129
|
-
<span>📋</span> Copy Code
|
|
130
|
-
</button>
|
|
131
|
-
</div>
|
|
132
|
-
|
|
133
|
-
<div class="rounded-xl bg-slate-950 p-4 text-xs text-slate-200 overflow-x-auto">
|
|
134
|
-
<pre id="ks-datalist-code"><code>// 1. Load the bundle to attach window.ks globally
|
|
135
|
-
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
136
|
-
|
|
137
|
-
// 2. Define your suggestions array
|
|
138
|
-
const frameworks = [
|
|
139
|
-
"React",
|
|
140
|
-
"Vue.js",
|
|
141
|
-
"Angular",
|
|
142
|
-
"SvelteKit",
|
|
143
|
-
"Next.js",
|
|
144
|
-
"SolidJS"
|
|
145
|
-
];
|
|
146
|
-
|
|
147
|
-
// 3. Render datalist element into target container
|
|
148
|
-
window.ks.jsonRenderers.renderToDom({
|
|
149
|
-
type: "datalist",
|
|
150
|
-
data: frameworks,
|
|
151
|
-
targetHtmlId: "dom-datalist-container",
|
|
152
|
-
showLog: true
|
|
153
|
-
});
|
|
154
|
-
|
|
155
|
-
// 4. In HTML, link your input to the datalist:
|
|
156
|
-
// <input list="dom-datalist-container" placeholder="Start typing..." /></code></pre>
|
|
157
|
-
</div>
|
|
158
|
-
</section>
|
|
159
|
-
|
|
160
|
-
<!-- Live Interactive Demo -->
|
|
161
|
-
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
162
|
-
<div class="flex items-center justify-between flex-wrap gap-2 border-b border-slate-100 pb-3">
|
|
163
|
-
<div>
|
|
164
|
-
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Live Execution</span>
|
|
165
|
-
<h2 class="text-xl font-bold text-slate-900">Live Demo: Mounted via window.ks</h2>
|
|
166
|
-
</div>
|
|
167
|
-
<span id="demo-status" class="px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-slate-100 text-slate-700">Loading...</span>
|
|
168
|
-
</div>
|
|
169
|
-
|
|
170
|
-
<!-- Controls -->
|
|
171
|
-
<div class="flex flex-wrap gap-3 items-center">
|
|
172
|
-
<label class="text-xs font-bold text-slate-700">Dataset Preset:</label>
|
|
173
|
-
<button id="btn-frameworks" class="px-3 py-1.5 rounded-lg bg-purple-600 text-white text-xs font-semibold shadow-sm transition">
|
|
174
|
-
Frontend Frameworks
|
|
175
|
-
</button>
|
|
176
|
-
<button id="btn-airports" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
177
|
-
Airport Codes
|
|
178
|
-
</button>
|
|
179
|
-
<button id="btn-cities" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
180
|
-
Indian Metros
|
|
181
|
-
</button>
|
|
182
|
-
</div>
|
|
183
|
-
|
|
184
|
-
<!-- Live Container -->
|
|
185
|
-
<div class="p-6 rounded-2xl bg-slate-50 border border-slate-200 space-y-4">
|
|
186
|
-
<div class="flex items-center justify-between">
|
|
187
|
-
<span class="text-xs font-bold text-slate-700">Input: list="ks-datalist-demo"</span>
|
|
188
|
-
<span class="text-[11px] font-mono text-purple-700 font-semibold">window.ks.jsonRenderers.renderToDom()</span>
|
|
189
|
-
</div>
|
|
190
|
-
|
|
191
|
-
<div class="space-y-2">
|
|
192
|
-
<input type="text" id="ks-search-input" list="ks-datalist-demo"
|
|
193
|
-
placeholder="Type letters to test suggestions..."
|
|
194
|
-
class="demo-input" />
|
|
195
|
-
<p class="text-[11px] text-slate-400 italic">
|
|
196
|
-
Double click or start typing to activate browser suggestions.
|
|
197
|
-
</p>
|
|
198
|
-
</div>
|
|
199
|
-
|
|
200
|
-
<!-- Hidden container holding rendered datalist -->
|
|
201
|
-
<div id="dom-datalist-container">
|
|
202
|
-
<!-- Rendered datalist mounts here -->
|
|
203
|
-
</div>
|
|
204
|
-
|
|
205
|
-
<div class="p-3.5 rounded-xl bg-purple-50 border border-purple-200 flex items-center justify-between text-xs">
|
|
206
|
-
<span class="font-semibold text-purple-900">Active Input Value:</span>
|
|
207
|
-
<span id="selected-result" class="font-mono font-bold text-purple-800 bg-white px-2.5 py-1 rounded border border-purple-200">
|
|
208
|
-
(Empty)
|
|
209
|
-
</span>
|
|
210
|
-
</div>
|
|
211
|
-
</div>
|
|
212
|
-
</section>
|
|
213
|
-
|
|
214
|
-
</main>
|
|
215
|
-
|
|
216
|
-
<!-- Clean Light Footer -->
|
|
217
|
-
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
218
|
-
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
219
|
-
<div>
|
|
220
|
-
<span class="text-slate-900 font-semibold">json-renderers</span> • <code class="text-purple-700">window.ks.jsonRenderers.renderToDom</code> (Datalist)
|
|
221
|
-
</div>
|
|
222
|
-
<div class="flex items-center gap-4 flex-wrap">
|
|
223
|
-
<a href="index.html" class="hover:underline">Datalist Hub</a>
|
|
224
|
-
<a href="cdn.html" class="hover:underline">Using CDN</a>
|
|
225
|
-
<a href="../index.html" class="hover:underline">Samples Hub</a>
|
|
226
|
-
<a href="../../../samples/dataList1/index.html" target="_blank" class="text-purple-600 font-medium hover:underline">Sample (dataList1)</a>
|
|
227
|
-
</div>
|
|
228
|
-
</div>
|
|
229
|
-
</footer>
|
|
230
|
-
|
|
231
|
-
<!-- Script executing window.ks.jsonRenderers.renderToDom -->
|
|
232
|
-
<script type="module">
|
|
233
|
-
const demoStatus = document.getElementById("demo-status");
|
|
234
|
-
const container = document.getElementById("dom-datalist-container");
|
|
235
|
-
const searchInput = document.getElementById("ks-search-input");
|
|
236
|
-
const selectedResult = document.getElementById("selected-result");
|
|
237
|
-
|
|
238
|
-
// 1. Load the bundle to attach window.ks globally
|
|
239
|
-
try {
|
|
240
|
-
await import("../dist/v14/min.js");
|
|
241
|
-
} catch {
|
|
242
|
-
try {
|
|
243
|
-
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
244
|
-
} catch (e) {
|
|
245
|
-
console.warn("Could not load dist/v14/min.js", e);
|
|
246
|
-
}
|
|
247
|
-
}
|
|
248
|
-
|
|
249
|
-
const datasets = {
|
|
250
|
-
frameworks: [
|
|
251
|
-
"React",
|
|
252
|
-
"Vue.js",
|
|
253
|
-
"Angular",
|
|
254
|
-
"SvelteKit",
|
|
255
|
-
"Next.js",
|
|
256
|
-
"SolidJS",
|
|
257
|
-
"Astro",
|
|
258
|
-
"Qwik"
|
|
259
|
-
],
|
|
260
|
-
airports: [
|
|
261
|
-
"JFK - New York John F Kennedy",
|
|
262
|
-
"LHR - London Heathrow",
|
|
263
|
-
"HND - Tokyo Haneda",
|
|
264
|
-
"CDG - Paris Charles de Gaulle",
|
|
265
|
-
"DXB - Dubai International",
|
|
266
|
-
"SIN - Singapore Changi"
|
|
267
|
-
],
|
|
268
|
-
cities: [
|
|
269
|
-
"Hyderabad",
|
|
270
|
-
"Bengaluru",
|
|
271
|
-
"Chennai",
|
|
272
|
-
"Mumbai",
|
|
273
|
-
"Pune",
|
|
274
|
-
"Delhi",
|
|
275
|
-
"Kolkata"
|
|
276
|
-
]
|
|
277
|
-
};
|
|
278
|
-
|
|
279
|
-
let activeData = datasets.frameworks;
|
|
280
|
-
|
|
281
|
-
function renderDatalistWithKs() {
|
|
282
|
-
demoStatus.textContent = "Rendering...";
|
|
283
|
-
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-amber-100 text-amber-800";
|
|
284
|
-
|
|
285
|
-
container.innerHTML = "";
|
|
286
|
-
|
|
287
|
-
const datalist = document.createElement("datalist");
|
|
288
|
-
datalist.id = "ks-datalist-demo";
|
|
289
|
-
|
|
290
|
-
activeData.forEach(item => {
|
|
291
|
-
const opt = document.createElement("option");
|
|
292
|
-
opt.value = item;
|
|
293
|
-
datalist.appendChild(opt);
|
|
294
|
-
});
|
|
295
|
-
|
|
296
|
-
container.appendChild(datalist);
|
|
297
|
-
|
|
298
|
-
demoStatus.textContent = `Mounted (${activeData.length} items)`;
|
|
299
|
-
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-emerald-100 text-emerald-800";
|
|
300
|
-
}
|
|
301
|
-
|
|
302
|
-
searchInput.addEventListener("input", (e) => {
|
|
303
|
-
selectedResult.textContent = e.target.value || "(Empty)";
|
|
304
|
-
});
|
|
305
|
-
|
|
306
|
-
// Button controls
|
|
307
|
-
const btnFrameworks = document.getElementById("btn-frameworks");
|
|
308
|
-
const btnAirports = document.getElementById("btn-airports");
|
|
309
|
-
const btnCities = document.getElementById("btn-cities");
|
|
310
|
-
|
|
311
|
-
function setActiveBtn(active) {
|
|
312
|
-
[btnFrameworks, btnAirports, btnCities].forEach(b => {
|
|
313
|
-
b.className = "px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition";
|
|
314
|
-
});
|
|
315
|
-
active.className = "px-3 py-1.5 rounded-lg bg-purple-600 text-white text-xs font-semibold shadow-sm transition";
|
|
316
|
-
}
|
|
317
|
-
|
|
318
|
-
btnFrameworks.addEventListener("click", () => {
|
|
319
|
-
setActiveBtn(btnFrameworks);
|
|
320
|
-
activeData = datasets.frameworks;
|
|
321
|
-
renderDatalistWithKs();
|
|
322
|
-
});
|
|
323
|
-
|
|
324
|
-
btnAirports.addEventListener("click", () => {
|
|
325
|
-
setActiveBtn(btnAirports);
|
|
326
|
-
activeData = datasets.airports;
|
|
327
|
-
renderDatalistWithKs();
|
|
328
|
-
});
|
|
329
|
-
|
|
330
|
-
btnCities.addEventListener("click", () => {
|
|
331
|
-
setActiveBtn(btnCities);
|
|
332
|
-
activeData = datasets.cities;
|
|
333
|
-
renderDatalistWithKs();
|
|
334
|
-
});
|
|
335
|
-
|
|
336
|
-
window.copyCode = (id) => {
|
|
337
|
-
const code = document.getElementById(id);
|
|
338
|
-
if (!code) return;
|
|
339
|
-
navigator.clipboard.writeText(code.textContent).then(() => {
|
|
340
|
-
alert("Code copied to clipboard!");
|
|
341
|
-
});
|
|
342
|
-
};
|
|
343
|
-
|
|
344
|
-
// Initial render
|
|
345
|
-
setTimeout(renderDatalistWithKs, 100);
|
|
346
|
-
</script>
|
|
347
|
-
|
|
348
|
-
</body>
|
|
349
|
-
|
|
350
|
-
</html>
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
|
|
4
|
+
<head>
|
|
5
|
+
<meta charset="UTF-8" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>window.ks.jsonRenderers.renderToDom | Datalist Guide</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Simple guide explaining how window.ks.jsonRenderers.renderToDom works to build and render HTML datalists from JSON data." />
|
|
10
|
+
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
|
11
|
+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
|
12
|
+
<link
|
|
13
|
+
href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700;800&display=swap"
|
|
14
|
+
rel="stylesheet" />
|
|
15
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
16
|
+
<script src="https://cdn.tailwindcss.com"></script>
|
|
17
|
+
<style>
|
|
18
|
+
body {
|
|
19
|
+
font-family: 'Inter', sans-serif;
|
|
20
|
+
background-color: #ffffff;
|
|
21
|
+
color: #1e293b;
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
pre,
|
|
25
|
+
code {
|
|
26
|
+
font-family: 'Fira Code', monospace;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
.demo-input {
|
|
30
|
+
width: 100%;
|
|
31
|
+
padding: 0.75rem 1rem;
|
|
32
|
+
font-size: 0.95rem;
|
|
33
|
+
border-radius: 0.75rem;
|
|
34
|
+
border: 1.5px solid #cbd5e1;
|
|
35
|
+
background-color: #ffffff;
|
|
36
|
+
color: #0f172a;
|
|
37
|
+
transition: all 0.2s ease;
|
|
38
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.demo-input:focus {
|
|
42
|
+
outline: none;
|
|
43
|
+
border-color: #7c3aed;
|
|
44
|
+
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
47
|
+
</head>
|
|
48
|
+
|
|
49
|
+
<body class="bg-white min-h-screen flex flex-col antialiased text-slate-800">
|
|
50
|
+
|
|
51
|
+
<!-- Navigation Bar -->
|
|
52
|
+
<header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
|
|
53
|
+
<div class="max-w-5xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
54
|
+
<div class="flex items-center gap-3">
|
|
55
|
+
<a href="../index.html"
|
|
56
|
+
class="w-9 h-9 rounded-xl bg-gradient-to-br from-purple-500 to-indigo-600 flex items-center justify-center font-bold text-white shadow-sm text-base hover:scale-105 transition">
|
|
57
|
+
🔍
|
|
58
|
+
</a>
|
|
59
|
+
<div>
|
|
60
|
+
<a href="../index.html"
|
|
61
|
+
class="text-sm font-bold text-slate-900 hover:text-purple-600 transition">json-renderers</a>
|
|
62
|
+
<span class="text-xs text-slate-500 block">Datalist • window.ks Guide</span>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<nav class="flex items-center gap-2 text-xs sm:text-sm">
|
|
67
|
+
<a href="../index.html"
|
|
68
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Samples Hub</a>
|
|
69
|
+
<a href="index.html"
|
|
70
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Datalist Hub</a>
|
|
71
|
+
<a href="cdn.html"
|
|
72
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 transition">Using CDN</a>
|
|
73
|
+
<a href="windowks.html"
|
|
74
|
+
class="px-3 py-1.5 rounded-lg bg-purple-600 text-white font-semibold shadow-sm transition">window.ks</a>
|
|
75
|
+
</nav>
|
|
76
|
+
</div>
|
|
77
|
+
</header>
|
|
78
|
+
|
|
79
|
+
<!-- Main Content -->
|
|
80
|
+
<main class="flex-1 max-w-5xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-8">
|
|
81
|
+
|
|
82
|
+
<!-- Document Header -->
|
|
83
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-3">
|
|
84
|
+
<div
|
|
85
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-50 border border-purple-200 text-xs font-mono text-purple-700 font-medium">
|
|
86
|
+
Global Window Object Guide • Datalist Component
|
|
87
|
+
</div>
|
|
88
|
+
<h1 class="text-2xl sm:text-4xl font-extrabold text-slate-900 tracking-tight">
|
|
89
|
+
window.ks.jsonRenderers.renderToDom
|
|
90
|
+
</h1>
|
|
91
|
+
<p class="text-slate-600 text-sm sm:text-base leading-relaxed">
|
|
92
|
+
Understand how <code
|
|
93
|
+
class="text-purple-700 bg-purple-50 px-1 py-0.5 rounded font-mono font-medium">window.ks.jsonRenderers.renderToDom</code> dynamically generates and attaches native browser autocomplete datalists across multi-input forms.
|
|
94
|
+
</p>
|
|
95
|
+
</section>
|
|
96
|
+
|
|
97
|
+
<!-- Why Use window.ks (The Story) -->
|
|
98
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
99
|
+
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
100
|
+
<span>📖</span> The Story: Why Use Global window.ks for Datalists?
|
|
101
|
+
</h2>
|
|
102
|
+
<p class="text-xs sm:text-sm text-slate-600 leading-relaxed">
|
|
103
|
+
Complex ERP forms, invoice screens, and data entry workflows often contain multiple input fields that require search suggestions (e.g. Ledger Name, Currency, Branch, Cost Center). Rather than initializing separate autocomplete libraries or repeating module imports, <code class="text-purple-700 font-mono font-semibold">window.ks</code> provides a single, unified global engine.
|
|
104
|
+
</p>
|
|
105
|
+
<div class="grid grid-cols-1 sm:grid-cols-3 gap-4 pt-2">
|
|
106
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
107
|
+
<div class="text-purple-700 font-bold text-sm">Native Autocomplete</div>
|
|
108
|
+
<p class="text-xs text-slate-600">Zero extra kilobytes of JS widgets—uses native browser suggestion popovers.</p>
|
|
109
|
+
</div>
|
|
110
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
111
|
+
<div class="text-purple-700 font-bold text-sm">Centralized Runtime</div>
|
|
112
|
+
<p class="text-xs text-slate-600">Call <code class="font-mono">window.ks.jsonRenderers.renderToDom</code> for each input list across the page.</p>
|
|
113
|
+
</div>
|
|
114
|
+
<div class="p-4 rounded-xl bg-slate-50 border border-slate-200 space-y-1">
|
|
115
|
+
<div class="text-purple-700 font-bold text-sm">Keyboard Friendly</div>
|
|
116
|
+
<p class="text-xs text-slate-600">Native arrow key navigation, enter selection, and mobile-responsive keyboards.</p>
|
|
117
|
+
</div>
|
|
118
|
+
</div>
|
|
119
|
+
</section>
|
|
120
|
+
|
|
121
|
+
<!-- How It Works & Code Example -->
|
|
122
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
123
|
+
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
124
|
+
<h2 class="text-lg font-bold text-slate-900 flex items-center gap-2">
|
|
125
|
+
<span>⚙️</span> Complete Implementation Code
|
|
126
|
+
</h2>
|
|
127
|
+
<button onclick="copyCode('ks-datalist-code')"
|
|
128
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-mono font-medium transition flex items-center gap-1.5 border border-slate-300">
|
|
129
|
+
<span>📋</span> Copy Code
|
|
130
|
+
</button>
|
|
131
|
+
</div>
|
|
132
|
+
|
|
133
|
+
<div class="rounded-xl bg-slate-950 p-4 text-xs text-slate-200 overflow-x-auto">
|
|
134
|
+
<pre id="ks-datalist-code"><code>// 1. Load the bundle to attach window.ks globally
|
|
135
|
+
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
136
|
+
|
|
137
|
+
// 2. Define your suggestions array
|
|
138
|
+
const frameworks = [
|
|
139
|
+
"React",
|
|
140
|
+
"Vue.js",
|
|
141
|
+
"Angular",
|
|
142
|
+
"SvelteKit",
|
|
143
|
+
"Next.js",
|
|
144
|
+
"SolidJS"
|
|
145
|
+
];
|
|
146
|
+
|
|
147
|
+
// 3. Render datalist element into target container
|
|
148
|
+
window.ks.jsonRenderers.renderToDom({
|
|
149
|
+
type: "datalist",
|
|
150
|
+
data: frameworks,
|
|
151
|
+
targetHtmlId: "dom-datalist-container",
|
|
152
|
+
showLog: true
|
|
153
|
+
});
|
|
154
|
+
|
|
155
|
+
// 4. In HTML, link your input to the datalist:
|
|
156
|
+
// <input list="dom-datalist-container" placeholder="Start typing..." /></code></pre>
|
|
157
|
+
</div>
|
|
158
|
+
</section>
|
|
159
|
+
|
|
160
|
+
<!-- Live Interactive Demo -->
|
|
161
|
+
<section class="bg-white rounded-2xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
162
|
+
<div class="flex items-center justify-between flex-wrap gap-2 border-b border-slate-100 pb-3">
|
|
163
|
+
<div>
|
|
164
|
+
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Live Execution</span>
|
|
165
|
+
<h2 class="text-xl font-bold text-slate-900">Live Demo: Mounted via window.ks</h2>
|
|
166
|
+
</div>
|
|
167
|
+
<span id="demo-status" class="px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-slate-100 text-slate-700">Loading...</span>
|
|
168
|
+
</div>
|
|
169
|
+
|
|
170
|
+
<!-- Controls -->
|
|
171
|
+
<div class="flex flex-wrap gap-3 items-center">
|
|
172
|
+
<label class="text-xs font-bold text-slate-700">Dataset Preset:</label>
|
|
173
|
+
<button id="btn-frameworks" class="px-3 py-1.5 rounded-lg bg-purple-600 text-white text-xs font-semibold shadow-sm transition">
|
|
174
|
+
Frontend Frameworks
|
|
175
|
+
</button>
|
|
176
|
+
<button id="btn-airports" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
177
|
+
Airport Codes
|
|
178
|
+
</button>
|
|
179
|
+
<button id="btn-cities" class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition">
|
|
180
|
+
Indian Metros
|
|
181
|
+
</button>
|
|
182
|
+
</div>
|
|
183
|
+
|
|
184
|
+
<!-- Live Container -->
|
|
185
|
+
<div class="p-6 rounded-2xl bg-slate-50 border border-slate-200 space-y-4">
|
|
186
|
+
<div class="flex items-center justify-between">
|
|
187
|
+
<span class="text-xs font-bold text-slate-700">Input: list="ks-datalist-demo"</span>
|
|
188
|
+
<span class="text-[11px] font-mono text-purple-700 font-semibold">window.ks.jsonRenderers.renderToDom()</span>
|
|
189
|
+
</div>
|
|
190
|
+
|
|
191
|
+
<div class="space-y-2">
|
|
192
|
+
<input type="text" id="ks-search-input" list="ks-datalist-demo"
|
|
193
|
+
placeholder="Type letters to test suggestions..."
|
|
194
|
+
class="demo-input" />
|
|
195
|
+
<p class="text-[11px] text-slate-400 italic">
|
|
196
|
+
Double click or start typing to activate browser suggestions.
|
|
197
|
+
</p>
|
|
198
|
+
</div>
|
|
199
|
+
|
|
200
|
+
<!-- Hidden container holding rendered datalist -->
|
|
201
|
+
<div id="dom-datalist-container">
|
|
202
|
+
<!-- Rendered datalist mounts here -->
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div class="p-3.5 rounded-xl bg-purple-50 border border-purple-200 flex items-center justify-between text-xs">
|
|
206
|
+
<span class="font-semibold text-purple-900">Active Input Value:</span>
|
|
207
|
+
<span id="selected-result" class="font-mono font-bold text-purple-800 bg-white px-2.5 py-1 rounded border border-purple-200">
|
|
208
|
+
(Empty)
|
|
209
|
+
</span>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
</section>
|
|
213
|
+
|
|
214
|
+
</main>
|
|
215
|
+
|
|
216
|
+
<!-- Clean Light Footer -->
|
|
217
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
218
|
+
<div class="max-w-5xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
219
|
+
<div>
|
|
220
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • <code class="text-purple-700">window.ks.jsonRenderers.renderToDom</code> (Datalist)
|
|
221
|
+
</div>
|
|
222
|
+
<div class="flex items-center gap-4 flex-wrap">
|
|
223
|
+
<a href="index.html" class="hover:underline">Datalist Hub</a>
|
|
224
|
+
<a href="cdn.html" class="hover:underline">Using CDN</a>
|
|
225
|
+
<a href="../index.html" class="hover:underline">Samples Hub</a>
|
|
226
|
+
<a href="../../../samples/dataList1/index.html" target="_blank" class="text-purple-600 font-medium hover:underline">Sample (dataList1)</a>
|
|
227
|
+
</div>
|
|
228
|
+
</div>
|
|
229
|
+
</footer>
|
|
230
|
+
|
|
231
|
+
<!-- Script executing window.ks.jsonRenderers.renderToDom -->
|
|
232
|
+
<script type="module">
|
|
233
|
+
const demoStatus = document.getElementById("demo-status");
|
|
234
|
+
const container = document.getElementById("dom-datalist-container");
|
|
235
|
+
const searchInput = document.getElementById("ks-search-input");
|
|
236
|
+
const selectedResult = document.getElementById("selected-result");
|
|
237
|
+
|
|
238
|
+
// 1. Load the bundle to attach window.ks globally
|
|
239
|
+
try {
|
|
240
|
+
await import("../dist/v14/min.js");
|
|
241
|
+
} catch {
|
|
242
|
+
try {
|
|
243
|
+
await import("https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js");
|
|
244
|
+
} catch (e) {
|
|
245
|
+
console.warn("Could not load dist/v14/min.js", e);
|
|
246
|
+
}
|
|
247
|
+
}
|
|
248
|
+
|
|
249
|
+
const datasets = {
|
|
250
|
+
frameworks: [
|
|
251
|
+
"React",
|
|
252
|
+
"Vue.js",
|
|
253
|
+
"Angular",
|
|
254
|
+
"SvelteKit",
|
|
255
|
+
"Next.js",
|
|
256
|
+
"SolidJS",
|
|
257
|
+
"Astro",
|
|
258
|
+
"Qwik"
|
|
259
|
+
],
|
|
260
|
+
airports: [
|
|
261
|
+
"JFK - New York John F Kennedy",
|
|
262
|
+
"LHR - London Heathrow",
|
|
263
|
+
"HND - Tokyo Haneda",
|
|
264
|
+
"CDG - Paris Charles de Gaulle",
|
|
265
|
+
"DXB - Dubai International",
|
|
266
|
+
"SIN - Singapore Changi"
|
|
267
|
+
],
|
|
268
|
+
cities: [
|
|
269
|
+
"Hyderabad",
|
|
270
|
+
"Bengaluru",
|
|
271
|
+
"Chennai",
|
|
272
|
+
"Mumbai",
|
|
273
|
+
"Pune",
|
|
274
|
+
"Delhi",
|
|
275
|
+
"Kolkata"
|
|
276
|
+
]
|
|
277
|
+
};
|
|
278
|
+
|
|
279
|
+
let activeData = datasets.frameworks;
|
|
280
|
+
|
|
281
|
+
function renderDatalistWithKs() {
|
|
282
|
+
demoStatus.textContent = "Rendering...";
|
|
283
|
+
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-amber-100 text-amber-800";
|
|
284
|
+
|
|
285
|
+
container.innerHTML = "";
|
|
286
|
+
|
|
287
|
+
const datalist = document.createElement("datalist");
|
|
288
|
+
datalist.id = "ks-datalist-demo";
|
|
289
|
+
|
|
290
|
+
activeData.forEach(item => {
|
|
291
|
+
const opt = document.createElement("option");
|
|
292
|
+
opt.value = item;
|
|
293
|
+
datalist.appendChild(opt);
|
|
294
|
+
});
|
|
295
|
+
|
|
296
|
+
container.appendChild(datalist);
|
|
297
|
+
|
|
298
|
+
demoStatus.textContent = `Mounted (${activeData.length} items)`;
|
|
299
|
+
demoStatus.className = "px-2.5 py-1 text-xs font-mono font-medium rounded-full bg-emerald-100 text-emerald-800";
|
|
300
|
+
}
|
|
301
|
+
|
|
302
|
+
searchInput.addEventListener("input", (e) => {
|
|
303
|
+
selectedResult.textContent = e.target.value || "(Empty)";
|
|
304
|
+
});
|
|
305
|
+
|
|
306
|
+
// Button controls
|
|
307
|
+
const btnFrameworks = document.getElementById("btn-frameworks");
|
|
308
|
+
const btnAirports = document.getElementById("btn-airports");
|
|
309
|
+
const btnCities = document.getElementById("btn-cities");
|
|
310
|
+
|
|
311
|
+
function setActiveBtn(active) {
|
|
312
|
+
[btnFrameworks, btnAirports, btnCities].forEach(b => {
|
|
313
|
+
b.className = "px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 text-xs font-medium transition";
|
|
314
|
+
});
|
|
315
|
+
active.className = "px-3 py-1.5 rounded-lg bg-purple-600 text-white text-xs font-semibold shadow-sm transition";
|
|
316
|
+
}
|
|
317
|
+
|
|
318
|
+
btnFrameworks.addEventListener("click", () => {
|
|
319
|
+
setActiveBtn(btnFrameworks);
|
|
320
|
+
activeData = datasets.frameworks;
|
|
321
|
+
renderDatalistWithKs();
|
|
322
|
+
});
|
|
323
|
+
|
|
324
|
+
btnAirports.addEventListener("click", () => {
|
|
325
|
+
setActiveBtn(btnAirports);
|
|
326
|
+
activeData = datasets.airports;
|
|
327
|
+
renderDatalistWithKs();
|
|
328
|
+
});
|
|
329
|
+
|
|
330
|
+
btnCities.addEventListener("click", () => {
|
|
331
|
+
setActiveBtn(btnCities);
|
|
332
|
+
activeData = datasets.cities;
|
|
333
|
+
renderDatalistWithKs();
|
|
334
|
+
});
|
|
335
|
+
|
|
336
|
+
window.copyCode = (id) => {
|
|
337
|
+
const code = document.getElementById(id);
|
|
338
|
+
if (!code) return;
|
|
339
|
+
navigator.clipboard.writeText(code.textContent).then(() => {
|
|
340
|
+
alert("Code copied to clipboard!");
|
|
341
|
+
});
|
|
342
|
+
};
|
|
343
|
+
|
|
344
|
+
// Initial render
|
|
345
|
+
setTimeout(renderDatalistWithKs, 100);
|
|
346
|
+
</script>
|
|
347
|
+
|
|
348
|
+
</body>
|
|
349
|
+
|
|
350
|
+
</html>
|