json-renderers 1.18.5 → 1.18.7
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/README.md +2 -3
- package/docs/dist/min.js +856 -557
- package/docs/dist/v18/min.js +856 -557
- package/docs/index.html +271 -845
- package/docs/indexV1.html +1091 -0
- package/docs/samples/datalist/cdn.html +505 -0
- package/docs/samples/datalist/index.html +311 -0
- package/docs/samples/datalist/windowks.html +350 -0
- package/docs/samples/index.html +326 -0
- package/docs/samples/select/cdn.html +520 -0
- package/docs/samples/select/index.html +311 -0
- package/docs/samples/select/windowks.html +358 -0
- package/docs/{table → samples/table}/cdn.html +7 -6
- package/docs/samples/table/index.html +314 -0
- package/docs/{table → samples/table}/windowKs.html +11 -6
- package/package.json +3 -3
- package/docs/table/index.html +0 -607
- package/docs/table/windowKsV1.html +0 -647
|
@@ -0,0 +1,311 @@
|
|
|
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>Datalist Documentation Hub | json-renderers</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Navigation hub for json-renderers Datalist component: choose between the modern direct CDN ES module import guide and the global window.ks enterprise runtime guide." />
|
|
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
|
+
<script>
|
|
18
|
+
tailwind.config = {
|
|
19
|
+
theme: {
|
|
20
|
+
extend: {
|
|
21
|
+
colors: {
|
|
22
|
+
brand: {
|
|
23
|
+
50: '#faf5ff',
|
|
24
|
+
100: '#f3e8ff',
|
|
25
|
+
500: '#a855f7',
|
|
26
|
+
600: '#9333ea',
|
|
27
|
+
700: '#7e22ce'
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
fontFamily: {
|
|
31
|
+
sans: ['Inter', 'sans-serif'],
|
|
32
|
+
mono: ['Fira Code', 'monospace']
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
}
|
|
36
|
+
};
|
|
37
|
+
</script>
|
|
38
|
+
<style>
|
|
39
|
+
body {
|
|
40
|
+
font-family: 'Inter', sans-serif;
|
|
41
|
+
background-color: #ffffff;
|
|
42
|
+
color: #1e293b;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
pre,
|
|
46
|
+
code {
|
|
47
|
+
font-family: 'Fira Code', monospace;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.card-hover {
|
|
51
|
+
transition: all 0.2s ease-in-out;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.card-hover:hover {
|
|
55
|
+
transform: translateY(-3px);
|
|
56
|
+
box-shadow: 0 12px 24px -10px rgba(0, 0, 0, 0.08);
|
|
57
|
+
}
|
|
58
|
+
</style>
|
|
59
|
+
</head>
|
|
60
|
+
|
|
61
|
+
<body class="bg-white text-slate-800 min-h-screen flex flex-col antialiased">
|
|
62
|
+
|
|
63
|
+
<!-- Main Content Container -->
|
|
64
|
+
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
|
|
65
|
+
|
|
66
|
+
<!-- Breadcrumb -->
|
|
67
|
+
<div class="flex items-center gap-2 text-xs text-slate-500 font-mono">
|
|
68
|
+
<a href="../../index.html" class="hover:text-slate-900 transition flex items-center gap-1 font-medium">
|
|
69
|
+
<span>🏠</span> Home
|
|
70
|
+
</a>
|
|
71
|
+
<span>/</span>
|
|
72
|
+
<a href="../../index.html" class="hover:text-slate-900 transition text-slate-400">docs</a>
|
|
73
|
+
<span>/</span>
|
|
74
|
+
<a href="../index.html" class="hover:text-slate-900 transition text-slate-400">samples</a>
|
|
75
|
+
<span>/</span>
|
|
76
|
+
<span class="text-purple-600 font-semibold font-mono">datalist</span>
|
|
77
|
+
</div>
|
|
78
|
+
|
|
79
|
+
<!-- Header Section -->
|
|
80
|
+
<div class="space-y-2">
|
|
81
|
+
<div
|
|
82
|
+
class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-50 border border-purple-200 text-xs font-mono font-semibold text-purple-800">
|
|
83
|
+
<span class="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span>
|
|
84
|
+
Datalist Component • Navigation Hub
|
|
85
|
+
</div>
|
|
86
|
+
<h1 class="text-3xl sm:text-4xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
87
|
+
Datalist Component Guides
|
|
88
|
+
</h1>
|
|
89
|
+
<p class="text-slate-600 text-sm sm:text-base max-w-3xl leading-relaxed">
|
|
90
|
+
Power native HTML5 <code
|
|
91
|
+
class="text-purple-700 font-mono bg-purple-50 px-1.5 py-0.5 rounded border border-purple-200"><datalist></code>
|
|
92
|
+
autocomplete suggestion popovers for text inputs from JSON arrays. Choose between the modern direct CDN ES
|
|
93
|
+
module import guide or the enterprise <code
|
|
94
|
+
class="text-purple-700 font-mono bg-purple-50 px-1.5 py-0.5 rounded border border-purple-200">window.ks</code>
|
|
95
|
+
runtime walkthrough.
|
|
96
|
+
</p>
|
|
97
|
+
</div>
|
|
98
|
+
|
|
99
|
+
<!-- Two Tracks Showcase Grid (Matching SubDoc design on white background) -->
|
|
100
|
+
<section class="grid grid-cols-1 md:grid-cols-2 gap-8">
|
|
101
|
+
|
|
102
|
+
<!-- Track 1: Using CDN Card -->
|
|
103
|
+
<div
|
|
104
|
+
class="bg-white p-6 sm:p-8 rounded-3xl border border-purple-300 flex flex-col justify-between relative overflow-hidden group hover:border-purple-500 transition shadow-sm hover:shadow-md">
|
|
105
|
+
<div
|
|
106
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-purple-50 rounded-full blur-3xl pointer-events-none group-hover:bg-purple-100/60 transition">
|
|
107
|
+
</div>
|
|
108
|
+
<div class="space-y-4 relative z-10">
|
|
109
|
+
<div class="flex items-center justify-between">
|
|
110
|
+
<span
|
|
111
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-purple-50 text-purple-800 border border-purple-200 flex items-center gap-1.5">
|
|
112
|
+
<span class="w-1.5 h-1.5 rounded-full bg-purple-500"></span> Quick Concept • 3 min read
|
|
113
|
+
</span>
|
|
114
|
+
<span class="text-3xl">⚡</span>
|
|
115
|
+
</div>
|
|
116
|
+
|
|
117
|
+
<h2 class="text-2xl font-bold text-slate-900 group-hover:text-purple-700 transition">Using CDN Import</h2>
|
|
118
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
119
|
+
Fast, zero-build integration directly from jsDelivr using modern ES modules. Includes live interactive
|
|
120
|
+
search input linking, keystroke autocomplete popovers, and dynamic keyword injection.
|
|
121
|
+
</p>
|
|
122
|
+
|
|
123
|
+
<div class="space-y-2 pt-2">
|
|
124
|
+
<div class="text-xs font-semibold text-slate-500 uppercase tracking-wider font-mono">What you will learn:
|
|
125
|
+
</div>
|
|
126
|
+
<ul class="text-xs text-slate-600 space-y-2.5">
|
|
127
|
+
<li class="flex items-start gap-2">
|
|
128
|
+
<span class="text-purple-600 font-bold font-mono">1.</span>
|
|
129
|
+
<span><strong>Zero-Build CDN Import:</strong> Direct <code
|
|
130
|
+
class="text-purple-700 font-mono bg-purple-50 px-1 rounded">import renderDirect from "..."</code>
|
|
131
|
+
via ES modules.</span>
|
|
132
|
+
</li>
|
|
133
|
+
<li class="flex items-start gap-2">
|
|
134
|
+
<span class="text-purple-600 font-bold font-mono">2.</span>
|
|
135
|
+
<span><strong>Input-Datalist Binding:</strong> Connecting <code
|
|
136
|
+
class="text-purple-700 font-mono"><input list="..."></code> to dynamic <code
|
|
137
|
+
class="text-purple-700 font-mono"><datalist></code>.</span>
|
|
138
|
+
</li>
|
|
139
|
+
<li class="flex items-start gap-2">
|
|
140
|
+
<span class="text-purple-600 font-bold font-mono">3.</span>
|
|
141
|
+
<span><strong>Interactive Search Sandbox:</strong> Keystroke testing and real-time suggestion filtering
|
|
142
|
+
workbench.</span>
|
|
143
|
+
</li>
|
|
144
|
+
<li class="flex items-start gap-2">
|
|
145
|
+
<span class="text-purple-600 font-bold font-mono">4.</span>
|
|
146
|
+
<span><strong>Dynamic Option Management:</strong> Pushing new search suggestions into the active
|
|
147
|
+
datalist at runtime.</span>
|
|
148
|
+
</li>
|
|
149
|
+
</ul>
|
|
150
|
+
</div>
|
|
151
|
+
</div>
|
|
152
|
+
|
|
153
|
+
<div class="pt-6 relative z-10">
|
|
154
|
+
<a href="cdn.html"
|
|
155
|
+
class="w-full py-3 px-4 rounded-xl font-semibold text-sm bg-gradient-to-r from-purple-600 to-indigo-600 hover:from-purple-700 hover:to-indigo-700 text-white flex items-center justify-center gap-2 shadow-sm transition">
|
|
156
|
+
<span>Read CDN Guide →</span>
|
|
157
|
+
</a>
|
|
158
|
+
</div>
|
|
159
|
+
</div>
|
|
160
|
+
|
|
161
|
+
<!-- Track 2: window.ks Global Runtime Card -->
|
|
162
|
+
<div
|
|
163
|
+
class="bg-white p-6 sm:p-8 rounded-3xl border border-indigo-300 flex flex-col justify-between relative overflow-hidden group hover:border-indigo-500 transition shadow-sm hover:shadow-md">
|
|
164
|
+
<div
|
|
165
|
+
class="absolute -right-12 -top-12 w-48 h-48 bg-indigo-50 rounded-full blur-3xl pointer-events-none group-hover:bg-indigo-100/60 transition">
|
|
166
|
+
</div>
|
|
167
|
+
<div class="space-y-4 relative z-10">
|
|
168
|
+
<div class="flex items-center justify-between">
|
|
169
|
+
<span
|
|
170
|
+
class="px-2.5 py-1 rounded-full text-xs font-mono font-semibold bg-indigo-50 text-indigo-800 border border-indigo-200 flex items-center gap-1.5">
|
|
171
|
+
<span class="w-1.5 h-1.5 rounded-full bg-indigo-500"></span> Deep Dive • 15 min read
|
|
172
|
+
</span>
|
|
173
|
+
<span class="text-3xl">🌐</span>
|
|
174
|
+
</div>
|
|
175
|
+
|
|
176
|
+
<h2 class="text-2xl font-bold text-slate-900 group-hover:text-indigo-700 transition">window.ks Global Runtime
|
|
177
|
+
</h2>
|
|
178
|
+
<p class="text-slate-600 text-sm leading-relaxed">
|
|
179
|
+
Enterprise handbook on using the pre-bundled <code
|
|
180
|
+
class="text-indigo-700 font-mono font-semibold">window.ks.jsonRenderers.renderToDom</code> API for native
|
|
181
|
+
autocomplete inputs in multi-page server architectures.
|
|
182
|
+
</p>
|
|
183
|
+
|
|
184
|
+
<div class="space-y-2 pt-2">
|
|
185
|
+
<div class="text-xs font-semibold text-slate-500 uppercase tracking-wider font-mono">What you will learn:
|
|
186
|
+
</div>
|
|
187
|
+
<ul class="text-xs text-slate-600 space-y-2.5">
|
|
188
|
+
<li class="flex items-start gap-2">
|
|
189
|
+
<span class="text-indigo-600 font-bold font-mono">1.</span>
|
|
190
|
+
<span><strong>Global Runtime Setup:</strong> Attaching <code
|
|
191
|
+
class="text-indigo-700 font-mono bg-indigo-50 px-1 rounded">window.ks</code> to the browser window
|
|
192
|
+
globally.</span>
|
|
193
|
+
</li>
|
|
194
|
+
<li class="flex items-start gap-2">
|
|
195
|
+
<span class="text-indigo-600 font-bold font-mono">2.</span>
|
|
196
|
+
<span><strong>renderToDom API:</strong> Configuration parameters for <code
|
|
197
|
+
class="text-indigo-700 font-mono">type: "datalist"</code> and target elements.</span>
|
|
198
|
+
</li>
|
|
199
|
+
<li class="flex items-start gap-2">
|
|
200
|
+
<span class="text-indigo-600 font-bold font-mono">3.</span>
|
|
201
|
+
<span><strong>Zero UI Bloat:</strong> Utilizes browser native popover menus with zero external component
|
|
202
|
+
libraries.</span>
|
|
203
|
+
</li>
|
|
204
|
+
<li class="flex items-start gap-2">
|
|
205
|
+
<span class="text-indigo-600 font-bold font-mono">4.</span>
|
|
206
|
+
<span><strong>Production Multi-Page Workflows:</strong> Drop-in script setup for corporate web apps and
|
|
207
|
+
search forms.</span>
|
|
208
|
+
</li>
|
|
209
|
+
</ul>
|
|
210
|
+
</div>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
<div class="pt-6 relative z-10">
|
|
214
|
+
<a href="windowks.html"
|
|
215
|
+
class="w-full py-3 px-4 rounded-xl font-semibold text-sm bg-gradient-to-r from-indigo-600 to-pink-600 hover:from-indigo-700 hover:to-pink-700 text-white flex items-center justify-center gap-2 shadow-sm transition">
|
|
216
|
+
<span>Read window.ks Guide →</span>
|
|
217
|
+
</a>
|
|
218
|
+
</div>
|
|
219
|
+
</div>
|
|
220
|
+
|
|
221
|
+
</section>
|
|
222
|
+
|
|
223
|
+
<!-- House-Building Story for Datalist -->
|
|
224
|
+
<section class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
225
|
+
<div class="space-y-1">
|
|
226
|
+
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Concept • Mental
|
|
227
|
+
Model</span>
|
|
228
|
+
<h2 class="text-2xl font-bold text-slate-900">The House-Building Story for Datalists</h2>
|
|
229
|
+
<p class="text-sm text-slate-600">How json-renderers constructs an HTML datalist autocomplete from JSON data</p>
|
|
230
|
+
</div>
|
|
231
|
+
|
|
232
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-5">
|
|
233
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
234
|
+
<div class="flex items-center justify-between">
|
|
235
|
+
<span class="text-2xl">📐</span>
|
|
236
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-purple-100 text-purple-800 font-semibold">1.
|
|
237
|
+
Architect</span>
|
|
238
|
+
</div>
|
|
239
|
+
<h3 class="text-base font-bold text-slate-900">json-renderers-build</h3>
|
|
240
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
241
|
+
Prepares the blueprint. It takes your suggestions array and creates a JSON specification defining a <code
|
|
242
|
+
class="text-purple-700 font-mono"><datalist></code> element with nested <code
|
|
243
|
+
class="text-purple-700 font-mono"><option></code> tags.
|
|
244
|
+
</p>
|
|
245
|
+
</div>
|
|
246
|
+
|
|
247
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
248
|
+
<div class="flex items-center justify-between">
|
|
249
|
+
<span class="text-2xl">👷</span>
|
|
250
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-indigo-100 text-indigo-800 font-semibold">2.
|
|
251
|
+
Worker</span>
|
|
252
|
+
</div>
|
|
253
|
+
<h3 class="text-base font-bold text-slate-900">@keshavsoft/json-to-tag</h3>
|
|
254
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
255
|
+
Builds the physical elements. Iterates over the blueprint specification and instantiates real browser <code
|
|
256
|
+
class="text-indigo-700 font-mono">HTMLDataListElement</code> and <code
|
|
257
|
+
class="text-indigo-700 font-mono">HTMLOptionElement</code> nodes.
|
|
258
|
+
</p>
|
|
259
|
+
</div>
|
|
260
|
+
|
|
261
|
+
<div class="p-5 rounded-2xl bg-slate-50 border border-slate-200 space-y-2">
|
|
262
|
+
<div class="flex items-center justify-between">
|
|
263
|
+
<span class="text-2xl">📋</span>
|
|
264
|
+
<span class="px-2 py-0.5 text-xs font-mono rounded bg-pink-100 text-pink-800 font-semibold">3. Site
|
|
265
|
+
Manager</span>
|
|
266
|
+
</div>
|
|
267
|
+
<h3 class="text-base font-bold text-slate-900">json-renderers</h3>
|
|
268
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
269
|
+
Mounts the finished product. Validates your configuration, calls the architect, directs the construction
|
|
270
|
+
worker, and links the datalist with the input element.
|
|
271
|
+
</p>
|
|
272
|
+
</div>
|
|
273
|
+
</div>
|
|
274
|
+
|
|
275
|
+
<!-- Golden Rule Banner -->
|
|
276
|
+
<div class="p-4 rounded-xl bg-purple-50 border border-purple-200 text-xs text-purple-900 flex items-start gap-3">
|
|
277
|
+
<span class="text-lg">💡</span>
|
|
278
|
+
<div>
|
|
279
|
+
<strong class="font-semibold">Golden Rule:</strong> Avoid heavy custom autocomplete dropdown libraries that
|
|
280
|
+
add tens of kilobytes of JavaScript. The native <code
|
|
281
|
+
class="font-mono bg-white px-1 py-0.5 rounded border border-purple-200"><datalist></code> tag provides
|
|
282
|
+
instant, keyboard-accessible autocomplete suggestions supported natively by all modern web browsers.
|
|
283
|
+
</div>
|
|
284
|
+
</div>
|
|
285
|
+
</section>
|
|
286
|
+
|
|
287
|
+
</main>
|
|
288
|
+
|
|
289
|
+
<!-- Clean Light Footer -->
|
|
290
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
291
|
+
<div
|
|
292
|
+
class="max-w-7xl mx-auto px-4 sm:px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-xs text-slate-600">
|
|
293
|
+
<div>
|
|
294
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • Datalist Documentation Hub
|
|
295
|
+
</div>
|
|
296
|
+
<div class="flex items-center gap-4 flex-wrap">
|
|
297
|
+
<a href="../../index.html" class="hover:text-purple-600 transition">Main Docs</a>
|
|
298
|
+
<a href="../index.html" class="hover:text-purple-600 transition">Samples Hub</a>
|
|
299
|
+
<a href="cdn.html" class="hover:text-purple-600 transition font-medium">Using CDN</a>
|
|
300
|
+
<a href="windowks.html" class="hover:text-purple-600 transition font-medium">window.ks</a>
|
|
301
|
+
<a href="../table/index.html" class="hover:text-emerald-600 transition">Table Docs</a>
|
|
302
|
+
<a href="../select/index.html" class="hover:text-blue-600 transition">Select Docs</a>
|
|
303
|
+
<a href="https://github.com/keshavsoft/json-renderers" target="_blank" rel="noopener noreferrer"
|
|
304
|
+
class="hover:underline">GitHub</a>
|
|
305
|
+
</div>
|
|
306
|
+
</div>
|
|
307
|
+
</footer>
|
|
308
|
+
|
|
309
|
+
</body>
|
|
310
|
+
|
|
311
|
+
</html>
|
|
@@ -0,0 +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>
|