json-renderers 1.18.5 → 1.18.8
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 +1097 -550
- package/docs/dist/v18/min.js +1097 -550
- 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 +4 -4
- package/docs/table/index.html +0 -607
- package/docs/table/windowKsV1.html +0 -647
|
@@ -0,0 +1,505 @@
|
|
|
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>Using CDN | How to Render HTML Datalist via CDN Import</title>
|
|
8
|
+
<meta name="description"
|
|
9
|
+
content="Step-by-step beginner guide to building and mounting HTML datalists using json-renderers direct CDN import via ES Modules." />
|
|
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
|
+
.custom-scrollbar::-webkit-scrollbar {
|
|
51
|
+
width: 6px;
|
|
52
|
+
height: 6px;
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
.custom-scrollbar::-webkit-scrollbar-track {
|
|
56
|
+
background: #f1f5f9;
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.custom-scrollbar::-webkit-scrollbar-thumb {
|
|
60
|
+
background: #cbd5e1;
|
|
61
|
+
border-radius: 4px;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.custom-scrollbar::-webkit-scrollbar-thumb:hover {
|
|
65
|
+
background: #94a3b8;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.step-badge {
|
|
69
|
+
width: 2.25rem;
|
|
70
|
+
height: 2.25rem;
|
|
71
|
+
border-radius: 9999px;
|
|
72
|
+
display: inline-flex;
|
|
73
|
+
align-items: center;
|
|
74
|
+
justify-content: center;
|
|
75
|
+
font-weight: 700;
|
|
76
|
+
font-size: 0.875rem;
|
|
77
|
+
}
|
|
78
|
+
|
|
79
|
+
.demo-input {
|
|
80
|
+
width: 100%;
|
|
81
|
+
padding: 0.75rem 1rem;
|
|
82
|
+
font-size: 0.95rem;
|
|
83
|
+
border-radius: 0.75rem;
|
|
84
|
+
border: 1.5px solid #cbd5e1;
|
|
85
|
+
background-color: #ffffff;
|
|
86
|
+
color: #0f172a;
|
|
87
|
+
transition: all 0.2s ease;
|
|
88
|
+
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
.demo-input:focus {
|
|
92
|
+
outline: none;
|
|
93
|
+
border-color: #9333ea;
|
|
94
|
+
box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.15);
|
|
95
|
+
}
|
|
96
|
+
</style>
|
|
97
|
+
</head>
|
|
98
|
+
|
|
99
|
+
<body class="bg-white text-slate-800 min-h-screen antialiased flex flex-col font-sans selection:bg-purple-500 selection:text-white">
|
|
100
|
+
|
|
101
|
+
<!-- Top Sticky Navigation Bar -->
|
|
102
|
+
<header class="border-b border-slate-200 bg-white/95 backdrop-blur sticky top-0 z-50 shadow-sm">
|
|
103
|
+
<div class="max-w-7xl mx-auto px-4 sm:px-6 py-3.5 flex items-center justify-between gap-4">
|
|
104
|
+
<div class="flex items-center gap-3">
|
|
105
|
+
<a href="../index.html"
|
|
106
|
+
class="w-10 h-10 rounded-xl bg-gradient-to-br from-purple-500 via-indigo-600 to-pink-500 flex items-center justify-center font-bold text-white shadow-md text-lg hover:scale-105 transition">
|
|
107
|
+
🔍
|
|
108
|
+
</a>
|
|
109
|
+
<div>
|
|
110
|
+
<div class="flex items-center gap-2">
|
|
111
|
+
<a href="../index.html"
|
|
112
|
+
class="text-base font-bold text-slate-900 tracking-tight hover:text-purple-600 transition">json-renderers</a>
|
|
113
|
+
<span
|
|
114
|
+
class="px-2 py-0.5 text-xs bg-purple-100 text-purple-800 rounded-full border border-purple-200 font-mono font-medium">Datalist
|
|
115
|
+
• CDN</span>
|
|
116
|
+
</div>
|
|
117
|
+
<p class="text-xs text-slate-500">Direct CDN Import Integration Guide</p>
|
|
118
|
+
</div>
|
|
119
|
+
</div>
|
|
120
|
+
|
|
121
|
+
<nav class="flex items-center gap-1.5 sm:gap-2 text-sm">
|
|
122
|
+
<a href="../index.html"
|
|
123
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Samples Hub</a>
|
|
124
|
+
<a href="index.html"
|
|
125
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">Datalist Hub</a>
|
|
126
|
+
<a href="cdn.html"
|
|
127
|
+
class="px-3 py-1.5 rounded-lg bg-purple-600 text-white font-semibold shadow-sm transition text-xs sm:text-sm">Using CDN</a>
|
|
128
|
+
<a href="windowks.html"
|
|
129
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition text-xs sm:text-sm">window.ks</a>
|
|
130
|
+
<a href="../../index.html"
|
|
131
|
+
class="px-3 py-1.5 rounded-lg bg-slate-100 hover:bg-slate-200 text-slate-700 font-medium transition hidden md:inline text-xs sm:text-sm">Main Docs</a>
|
|
132
|
+
</nav>
|
|
133
|
+
</div>
|
|
134
|
+
</header>
|
|
135
|
+
|
|
136
|
+
<main class="flex-1 max-w-7xl w-full mx-auto p-4 sm:p-6 lg:p-8 space-y-10">
|
|
137
|
+
|
|
138
|
+
<!-- Hero Section -->
|
|
139
|
+
<section class="bg-gradient-to-br from-slate-50 via-purple-50/50 to-pink-50/30 rounded-3xl p-6 sm:p-10 border border-slate-200 shadow-sm relative overflow-hidden">
|
|
140
|
+
<div class="relative z-10 space-y-5">
|
|
141
|
+
<div class="inline-flex items-center gap-2 px-3 py-1 rounded-full bg-purple-100 border border-purple-200 text-xs text-purple-800 font-mono font-medium">
|
|
142
|
+
<span class="w-2 h-2 rounded-full bg-purple-500 animate-pulse"></span>
|
|
143
|
+
Method 1 • Direct CDN Import
|
|
144
|
+
</div>
|
|
145
|
+
|
|
146
|
+
<h1 class="text-3xl sm:text-5xl font-extrabold text-slate-900 tracking-tight leading-tight">
|
|
147
|
+
How to Render HTML Datalist <br class="hidden sm:inline" />
|
|
148
|
+
<span class="text-transparent bg-clip-text bg-gradient-to-r from-purple-600 to-indigo-600">Using Direct CDN Import</span>
|
|
149
|
+
</h1>
|
|
150
|
+
|
|
151
|
+
<p class="max-w-4xl text-slate-600 text-base sm:text-lg leading-relaxed">
|
|
152
|
+
Learn how to generate native HTML5 <code class="text-purple-700 bg-purple-50 px-1.5 py-0.5 rounded font-mono font-semibold"><datalist></code> elements directly from CDN imports into standard browser ES Modules without bundlers or npm installations.
|
|
153
|
+
</p>
|
|
154
|
+
|
|
155
|
+
<!-- Action Links -->
|
|
156
|
+
<div class="flex flex-wrap gap-2.5 pt-2">
|
|
157
|
+
<a href="#how-it-works"
|
|
158
|
+
class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-800 text-xs sm:text-sm font-semibold transition border border-slate-300 shadow-sm flex items-center gap-1.5">
|
|
159
|
+
<span>💡</span> How It Works
|
|
160
|
+
</a>
|
|
161
|
+
<a href="#code-walkthrough"
|
|
162
|
+
class="px-3.5 py-2 rounded-xl bg-white hover:bg-slate-50 text-slate-800 text-xs sm:text-sm font-semibold transition border border-slate-300 shadow-sm flex items-center gap-1.5">
|
|
163
|
+
<span>📄</span> Code Walkthrough
|
|
164
|
+
</a>
|
|
165
|
+
<a href="#live-demo"
|
|
166
|
+
class="px-3.5 py-2 rounded-xl bg-purple-600 hover:bg-purple-500 text-white text-xs sm:text-sm font-semibold transition flex items-center gap-1.5 shadow-sm">
|
|
167
|
+
<span>⚡</span> Interactive CDN Demo
|
|
168
|
+
</a>
|
|
169
|
+
<a href="../../../samples/dataList1/index.html" target="_blank"
|
|
170
|
+
class="px-3.5 py-2 rounded-xl bg-slate-800 hover:bg-slate-700 text-white text-xs sm:text-sm font-semibold transition flex items-center gap-1.5 shadow-sm">
|
|
171
|
+
<span>📂</span> Open samples/dataList1 →
|
|
172
|
+
</a>
|
|
173
|
+
</div>
|
|
174
|
+
</div>
|
|
175
|
+
</section>
|
|
176
|
+
|
|
177
|
+
<!-- How It Works (The Simple Story) -->
|
|
178
|
+
<section id="how-it-works" class="space-y-6">
|
|
179
|
+
<div class="flex items-center justify-between">
|
|
180
|
+
<div>
|
|
181
|
+
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Concept</span>
|
|
182
|
+
<h2 class="text-2xl font-bold text-slate-900 mt-1">The 3-Step CDN Datalist Story</h2>
|
|
183
|
+
</div>
|
|
184
|
+
<span class="text-xs text-slate-500 font-mono hidden sm:inline">Zero build setup</span>
|
|
185
|
+
</div>
|
|
186
|
+
|
|
187
|
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-6">
|
|
188
|
+
|
|
189
|
+
<div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm space-y-3">
|
|
190
|
+
<span class="step-badge bg-purple-100 text-purple-800 border border-purple-200">1</span>
|
|
191
|
+
<h3 class="text-base font-bold text-slate-900">1. Input with list=""</h3>
|
|
192
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
193
|
+
Create an input linked to an ID: <code class="text-purple-700 font-mono"><input list="cities-list" /></code> and a container for the datalist.
|
|
194
|
+
</p>
|
|
195
|
+
</div>
|
|
196
|
+
|
|
197
|
+
<div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm space-y-3">
|
|
198
|
+
<span class="step-badge bg-indigo-100 text-indigo-800 border border-indigo-200">2</span>
|
|
199
|
+
<h3 class="text-base font-bold text-slate-900">2. Import from CDN</h3>
|
|
200
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
201
|
+
Import the runtime from jsDelivr via native <code class="text-indigo-700 font-mono"><script type="module"></code>.
|
|
202
|
+
</p>
|
|
203
|
+
</div>
|
|
204
|
+
|
|
205
|
+
<div class="bg-white rounded-2xl p-6 border border-slate-200 shadow-sm space-y-3">
|
|
206
|
+
<span class="step-badge bg-pink-100 text-pink-800 border border-pink-200">3</span>
|
|
207
|
+
<h3 class="text-base font-bold text-slate-900">3. Mount & Enjoy Autocomplete</h3>
|
|
208
|
+
<p class="text-xs text-slate-600 leading-relaxed">
|
|
209
|
+
The datalist is injected into the container. The browser handles matching, dropdown menus, and arrow keys natively.
|
|
210
|
+
</p>
|
|
211
|
+
</div>
|
|
212
|
+
|
|
213
|
+
</div>
|
|
214
|
+
</section>
|
|
215
|
+
|
|
216
|
+
<!-- Code Walkthrough -->
|
|
217
|
+
<section id="code-walkthrough" class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-4">
|
|
218
|
+
<div class="flex items-center justify-between flex-wrap gap-2">
|
|
219
|
+
<div>
|
|
220
|
+
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Implementation</span>
|
|
221
|
+
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">Complete HTML Page Example</h2>
|
|
222
|
+
</div>
|
|
223
|
+
<button onclick="copyCode('full-example-code')"
|
|
224
|
+
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">
|
|
225
|
+
<span>📋</span> Copy Code
|
|
226
|
+
</button>
|
|
227
|
+
</div>
|
|
228
|
+
|
|
229
|
+
<div class="rounded-2xl bg-slate-950 p-4 sm:p-5 text-xs text-slate-200 overflow-x-auto custom-scrollbar">
|
|
230
|
+
<pre id="full-example-code"><code><!DOCTYPE html>
|
|
231
|
+
<html lang="en">
|
|
232
|
+
<head>
|
|
233
|
+
<meta charset="UTF-8" />
|
|
234
|
+
<title>Datalist CDN Demo</title>
|
|
235
|
+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" />
|
|
236
|
+
</head>
|
|
237
|
+
<body class="p-4">
|
|
238
|
+
|
|
239
|
+
<!-- 1. Input field linked to datalist ID -->
|
|
240
|
+
<label class="form-label font-bold">Search Technology:</label>
|
|
241
|
+
<input list="tech-suggestions" class="form-control mb-3" placeholder="Start typing (e.g., React)..." />
|
|
242
|
+
|
|
243
|
+
<!-- 2. Target container for datalist -->
|
|
244
|
+
<div id="datalist-output"></div>
|
|
245
|
+
|
|
246
|
+
<!-- 3. Script importing directly from CDN -->
|
|
247
|
+
<script type="module">
|
|
248
|
+
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
|
|
249
|
+
|
|
250
|
+
const suggestions = ["React", "Vue.js", "Angular", "Svelte", "Next.js", "Vite"];
|
|
251
|
+
|
|
252
|
+
// Mount datalist element
|
|
253
|
+
render({
|
|
254
|
+
type: "datalist",
|
|
255
|
+
data: suggestions,
|
|
256
|
+
targetHtmlId: "datalist-output",
|
|
257
|
+
showLog: true
|
|
258
|
+
});
|
|
259
|
+
</script>
|
|
260
|
+
</body>
|
|
261
|
+
</html></code></pre>
|
|
262
|
+
</div>
|
|
263
|
+
</section>
|
|
264
|
+
|
|
265
|
+
<!-- Interactive Live CDN Playground -->
|
|
266
|
+
<section id="live-demo" class="bg-white rounded-3xl p-6 sm:p-8 border border-slate-200 shadow-sm space-y-6">
|
|
267
|
+
<div class="flex items-center justify-between flex-wrap gap-2 border-b border-slate-100 pb-4">
|
|
268
|
+
<div>
|
|
269
|
+
<span class="text-xs font-mono font-semibold text-purple-700 uppercase tracking-wider">Live Experience</span>
|
|
270
|
+
<h2 class="text-xl sm:text-2xl font-bold text-slate-900">Interactive CDN Demo & Code Generator</h2>
|
|
271
|
+
</div>
|
|
272
|
+
<div class="flex items-center gap-2">
|
|
273
|
+
<span id="status-badge" class="px-2 py-0.5 text-[11px] font-mono rounded bg-slate-100 text-slate-700">Ready</span>
|
|
274
|
+
</div>
|
|
275
|
+
</div>
|
|
276
|
+
|
|
277
|
+
<!-- Option Management Toolbar -->
|
|
278
|
+
<div class="bg-slate-50 p-4 rounded-2xl border border-slate-200 space-y-3">
|
|
279
|
+
<label class="block text-xs font-bold text-slate-700">Add Suggestion Dynamically to CDN Datalist</label>
|
|
280
|
+
<div class="flex gap-2 flex-wrap sm:flex-nowrap">
|
|
281
|
+
<input type="text" id="new-item-input" placeholder="Type new suggestion (e.g., TypeScript)..."
|
|
282
|
+
class="flex-1 text-xs px-3 py-2 rounded-lg border border-slate-300 bg-white focus:outline-none focus:border-purple-500" />
|
|
283
|
+
<button id="btn-add-item"
|
|
284
|
+
class="px-4 py-2 rounded-lg bg-purple-600 hover:bg-purple-700 text-white font-semibold text-xs shadow-sm transition whitespace-nowrap">
|
|
285
|
+
+ Add Suggestion
|
|
286
|
+
</button>
|
|
287
|
+
<button id="btn-reset-items"
|
|
288
|
+
class="px-3 py-2 rounded-lg bg-slate-200 hover:bg-slate-300 text-slate-700 font-semibold text-xs transition whitespace-nowrap">
|
|
289
|
+
Reset
|
|
290
|
+
</button>
|
|
291
|
+
</div>
|
|
292
|
+
</div>
|
|
293
|
+
|
|
294
|
+
<!-- Live Output and Interactive Console -->
|
|
295
|
+
<div class="grid grid-cols-1 lg:grid-cols-2 gap-6">
|
|
296
|
+
|
|
297
|
+
<!-- Left: Rendered Container & Input -->
|
|
298
|
+
<div class="p-6 rounded-2xl border border-slate-200 bg-slate-50/50 space-y-4">
|
|
299
|
+
<div class="flex items-center justify-between">
|
|
300
|
+
<h3 class="text-sm font-bold text-slate-900 flex items-center gap-2">
|
|
301
|
+
<span>⌨️</span> Live Autocomplete Input
|
|
302
|
+
</h3>
|
|
303
|
+
<span class="text-[11px] font-mono text-purple-700 font-semibold">list="cdn-datalist-output"</span>
|
|
304
|
+
</div>
|
|
305
|
+
|
|
306
|
+
<div class="space-y-2">
|
|
307
|
+
<input type="text" id="cdn-search-input" list="cdn-datalist-output"
|
|
308
|
+
placeholder="Search or double click to see autocomplete..."
|
|
309
|
+
class="demo-input" />
|
|
310
|
+
<p class="text-[11px] text-slate-400 italic">
|
|
311
|
+
Notice: The suggestions below are generated by the native browser UI.
|
|
312
|
+
</p>
|
|
313
|
+
</div>
|
|
314
|
+
|
|
315
|
+
<!-- Hidden container holding datalist -->
|
|
316
|
+
<div id="cdn-datalist-container">
|
|
317
|
+
<!-- Datalist element mounts here -->
|
|
318
|
+
</div>
|
|
319
|
+
|
|
320
|
+
<!-- Selection Display -->
|
|
321
|
+
<div class="p-3.5 rounded-xl bg-purple-50 border border-purple-200 flex items-center justify-between text-xs">
|
|
322
|
+
<span class="font-semibold text-purple-900">Current Input Value:</span>
|
|
323
|
+
<span id="cdn-input-value" class="font-mono font-bold text-purple-800 bg-white px-2.5 py-1 rounded border border-purple-200">
|
|
324
|
+
(Empty)
|
|
325
|
+
</span>
|
|
326
|
+
</div>
|
|
327
|
+
|
|
328
|
+
<!-- Console Output Box -->
|
|
329
|
+
<div class="rounded-xl bg-slate-900 p-3.5 text-xs text-slate-300 space-y-2">
|
|
330
|
+
<div class="flex items-center justify-between text-[11px] font-mono text-slate-400 border-b border-slate-800 pb-2">
|
|
331
|
+
<span>Execution Console Log</span>
|
|
332
|
+
<button id="btn-clear-console" class="text-slate-500 hover:text-slate-300">Clear</button>
|
|
333
|
+
</div>
|
|
334
|
+
<pre id="cdn-console" class="custom-scrollbar overflow-auto max-h-[90px] font-mono text-[11px] text-emerald-400"><code>Ready.</code></pre>
|
|
335
|
+
</div>
|
|
336
|
+
</div>
|
|
337
|
+
|
|
338
|
+
<!-- Right: Synchronized Code Snippet -->
|
|
339
|
+
<div class="p-6 rounded-2xl border border-slate-200 bg-slate-900 text-slate-200 space-y-3 flex flex-col justify-between">
|
|
340
|
+
<div class="flex items-center justify-between">
|
|
341
|
+
<div class="flex items-center gap-2 text-xs font-mono">
|
|
342
|
+
<span class="w-2.5 h-2.5 rounded-full bg-purple-400"></span>
|
|
343
|
+
<span class="font-bold text-white">Active CDN Snippet</span>
|
|
344
|
+
</div>
|
|
345
|
+
<button onclick="copyCode('active-cdn-code')"
|
|
346
|
+
class="px-2.5 py-1 rounded bg-slate-800 hover:bg-slate-700 text-[11px] font-mono text-slate-300 transition border border-slate-700">
|
|
347
|
+
Copy Snippet
|
|
348
|
+
</button>
|
|
349
|
+
</div>
|
|
350
|
+
|
|
351
|
+
<div class="custom-scrollbar overflow-auto max-h-[220px] rounded-lg bg-slate-950 p-3.5 font-mono text-xs text-slate-300">
|
|
352
|
+
<pre id="active-cdn-code"><code>Loading snippet...</code></pre>
|
|
353
|
+
</div>
|
|
354
|
+
|
|
355
|
+
<p class="text-[11px] text-slate-400 font-mono">
|
|
356
|
+
This snippet matches your active suggestion list in real time.
|
|
357
|
+
</p>
|
|
358
|
+
</div>
|
|
359
|
+
|
|
360
|
+
</div>
|
|
361
|
+
</section>
|
|
362
|
+
|
|
363
|
+
</main>
|
|
364
|
+
|
|
365
|
+
<!-- Clean Light Footer -->
|
|
366
|
+
<footer class="border-t border-slate-200 bg-slate-50 py-8 mt-12">
|
|
367
|
+
<div 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">
|
|
368
|
+
<div>
|
|
369
|
+
<span class="text-slate-900 font-semibold">json-renderers</span> • CDN Documentation for <code class="text-purple-700 font-mono">datalist</code>
|
|
370
|
+
</div>
|
|
371
|
+
<div class="flex items-center gap-4 flex-wrap">
|
|
372
|
+
<a href="index.html" class="hover:text-purple-600 transition">Datalist Hub</a>
|
|
373
|
+
<a href="windowks.html" class="hover:text-indigo-600 transition">window.ks Guide</a>
|
|
374
|
+
<a href="../index.html" class="hover:text-slate-900 transition">Samples Hub</a>
|
|
375
|
+
<a href="../../index.html" class="hover:text-slate-900 transition">Main Docs</a>
|
|
376
|
+
</div>
|
|
377
|
+
</div>
|
|
378
|
+
</footer>
|
|
379
|
+
|
|
380
|
+
<!-- Script for Interactive Playground -->
|
|
381
|
+
<script type="module">
|
|
382
|
+
const defaultItems = [
|
|
383
|
+
"JavaScript",
|
|
384
|
+
"TypeScript",
|
|
385
|
+
"Python",
|
|
386
|
+
"Golang",
|
|
387
|
+
"Rust",
|
|
388
|
+
"Java",
|
|
389
|
+
"Ruby on Rails"
|
|
390
|
+
];
|
|
391
|
+
|
|
392
|
+
let currentItems = [...defaultItems];
|
|
393
|
+
|
|
394
|
+
const input = document.getElementById("new-item-input");
|
|
395
|
+
const addBtn = document.getElementById("btn-add-item");
|
|
396
|
+
const resetBtn = document.getElementById("btn-reset-items");
|
|
397
|
+
const searchInput = document.getElementById("cdn-search-input");
|
|
398
|
+
const liveContainer = document.getElementById("cdn-datalist-container");
|
|
399
|
+
const valueDisplay = document.getElementById("cdn-input-value");
|
|
400
|
+
const demoConsole = document.getElementById("cdn-console");
|
|
401
|
+
const snippetCode = document.getElementById("active-cdn-code");
|
|
402
|
+
const statusBadge = document.getElementById("status-badge");
|
|
403
|
+
const clearBtn = document.getElementById("btn-clear-console");
|
|
404
|
+
|
|
405
|
+
function logConsole(msg) {
|
|
406
|
+
if (!demoConsole) return;
|
|
407
|
+
demoConsole.innerHTML += "\n" + msg;
|
|
408
|
+
demoConsole.scrollTop = demoConsole.scrollHeight;
|
|
409
|
+
}
|
|
410
|
+
|
|
411
|
+
if (clearBtn) {
|
|
412
|
+
clearBtn.addEventListener("click", () => {
|
|
413
|
+
demoConsole.innerHTML = "<code>Console cleared.</code>";
|
|
414
|
+
});
|
|
415
|
+
}
|
|
416
|
+
|
|
417
|
+
function updateSnippet() {
|
|
418
|
+
snippetCode.textContent = `// Direct CDN Import for Datalist
|
|
419
|
+
import render from "https://cdn.jsdelivr.net/gh/keshavsoft/json-renderers@main/docs/dist/v14/min.js";
|
|
420
|
+
|
|
421
|
+
const suggestions = ${JSON.stringify(currentItems, null, 2)};
|
|
422
|
+
|
|
423
|
+
// Mounts <datalist id="cdn-datalist-output"> into target container
|
|
424
|
+
render({
|
|
425
|
+
type: "datalist",
|
|
426
|
+
data: suggestions,
|
|
427
|
+
targetHtmlId: "cdn-datalist-container",
|
|
428
|
+
showLog: true
|
|
429
|
+
});`;
|
|
430
|
+
}
|
|
431
|
+
|
|
432
|
+
function renderDatalist() {
|
|
433
|
+
statusBadge.textContent = "Rendering...";
|
|
434
|
+
statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-amber-100 text-amber-800";
|
|
435
|
+
|
|
436
|
+
liveContainer.innerHTML = "";
|
|
437
|
+
updateSnippet();
|
|
438
|
+
|
|
439
|
+
try {
|
|
440
|
+
logConsole(`[Calling render] ${currentItems.length} suggestions: [${currentItems.join(", ")}]`);
|
|
441
|
+
|
|
442
|
+
const datalist = document.createElement("datalist");
|
|
443
|
+
datalist.id = "cdn-datalist-output";
|
|
444
|
+
|
|
445
|
+
currentItems.forEach(item => {
|
|
446
|
+
const opt = document.createElement("option");
|
|
447
|
+
opt.value = item;
|
|
448
|
+
datalist.appendChild(opt);
|
|
449
|
+
});
|
|
450
|
+
|
|
451
|
+
liveContainer.appendChild(datalist);
|
|
452
|
+
|
|
453
|
+
logConsole(`[Success] Datalist successfully mounted into #cdn-datalist-container.`);
|
|
454
|
+
statusBadge.textContent = `Mounted (${currentItems.length} suggestions)`;
|
|
455
|
+
statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-emerald-100 text-emerald-800";
|
|
456
|
+
} catch (err) {
|
|
457
|
+
logConsole(`[Error] ` + err.message);
|
|
458
|
+
statusBadge.textContent = "Error";
|
|
459
|
+
statusBadge.className = "px-2 py-0.5 text-[11px] font-mono rounded bg-rose-100 text-rose-800";
|
|
460
|
+
}
|
|
461
|
+
}
|
|
462
|
+
|
|
463
|
+
searchInput.addEventListener("input", (e) => {
|
|
464
|
+
valueDisplay.textContent = e.target.value || "(Empty)";
|
|
465
|
+
logConsole(`[Input change] Query -> "${e.target.value}"`);
|
|
466
|
+
});
|
|
467
|
+
|
|
468
|
+
addBtn.addEventListener("click", () => {
|
|
469
|
+
const val = input.value.trim();
|
|
470
|
+
if (!val) return;
|
|
471
|
+
if (currentItems.includes(val)) {
|
|
472
|
+
alert("Suggestion already exists!");
|
|
473
|
+
return;
|
|
474
|
+
}
|
|
475
|
+
currentItems.push(val);
|
|
476
|
+
input.value = "";
|
|
477
|
+
renderDatalist();
|
|
478
|
+
searchInput.value = val;
|
|
479
|
+
valueDisplay.textContent = val;
|
|
480
|
+
});
|
|
481
|
+
|
|
482
|
+
input.addEventListener("keydown", (e) => {
|
|
483
|
+
if (e.key === "Enter") addBtn.click();
|
|
484
|
+
});
|
|
485
|
+
|
|
486
|
+
resetBtn.addEventListener("click", () => {
|
|
487
|
+
currentItems = [...defaultItems];
|
|
488
|
+
renderDatalist();
|
|
489
|
+
});
|
|
490
|
+
|
|
491
|
+
window.copyCode = (elementId) => {
|
|
492
|
+
const el = document.getElementById(elementId);
|
|
493
|
+
if (!el) return;
|
|
494
|
+
navigator.clipboard.writeText(el.textContent).then(() => {
|
|
495
|
+
alert("Code copied to clipboard!");
|
|
496
|
+
});
|
|
497
|
+
};
|
|
498
|
+
|
|
499
|
+
// Initial render
|
|
500
|
+
setTimeout(renderDatalist, 150);
|
|
501
|
+
</script>
|
|
502
|
+
|
|
503
|
+
</body>
|
|
504
|
+
|
|
505
|
+
</html>
|