example-json.html - jscancer - Javascript crap (relatively small)
(HTM) git clone git://git.codemadness.org/jscancer
(DIR) Log
(DIR) Files
(DIR) Refs
(DIR) README
(DIR) LICENSE
---
example-json.html (2641B)
---
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
2 <html>
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
5 <title>jsdatalist</title>
6 <link rel="stylesheet" type="text/css" href="datalist.css" />
7 <style type="text/css">
8 .yes {
9 background-color: #92d543;
10 }
11 .no {
12 background-color: #d54343;
13 }
14 </style>
15 </head>
16 <body>
17
18 <form method="post" action="">
19
20 <p>Inline <datalist>:</p>
21
22 <label for="os">OS: </label>
23 <input type="text" placeholder="Select OS..." value="" list="list" name="os" id="os" class="datalist" /><br/>
24
25 <datalist class="datalist" id="list">
26 <option>DragonflyBSD</option>
27 <option>GNU/Hurd</option>
28 <option>GNU/Linux</option>
29 <option>FreeBSD</option>
30 <option>MS-DOS 6.11</option>
31 <option>OpenBSD</option>
32 <option>OpenSolaris</option>
33 <option>NetBSD</option>
34 <option>Plan9</option>
35 <option>Windows</option>
36 </datalist>
37
38 <p>Using XMLHttpRequest + JSON:</p>
39
40 <label for="remote">OS: </label>
41 <input type="text" placeholder="Select OS..." value="" data-url="example-data.json?q=" name="remote" id="remote" class="datalist" /><br/>
42
43 <p>Using XMLHttpRequest + custom URL function + JSON:</p>
44
45 <label for="remotecustom">OS: </label>
46 <input type="text" placeholder="Select OS..." value="" data-urlfn="custom_urlfn" name="remotecustom" id="remotecustom" class="datalist" /><br/>
47
48 <label for="remotecustom2">OS: </label>
49 <input type="text" placeholder="Select OS..." value="" data-urlfn="custom_urlfn" name="remotecustom" id="remotecustom2" class="datalist" /><br/>
50
51 <label for="remotecustom3">OS (multi-table): </label>
52 <input type="text" placeholder="Select OS..." value="" data-urlfn="custom_multi_urlfn" name="remotecustom3" id="remotecustom3" class="datalist" /><br/>
53
54 <label for="remotecustom4">OS (multi-table, small dataset): </label>
55 <input type="text" placeholder="Select OS..." value="" data-urlfn="custom_multi_small_urlfn" name="remotecustom4" id="remotecustom4" class="datalist" autofocus /><br/>
56
57 </form>
58
59 <script type="text/javascript">
60 function custom_urlfn(s, input) {
61 return "example-data.json?q=" + encodeURIComponent(s);
62 }
63
64 function custom_multi_urlfn(s, input) {
65 return "example-data-cols.json?q=" + encodeURIComponent(s);
66 }
67
68 function custom_multi_small_urlfn(s, input) {
69 return "example-data-cols-small.json?q=" + encodeURIComponent(s);
70 }
71
72 function datalist_format_item_bool(value, td) {
73 td.classList[value === "Yes" ? "add" : "remove"]("yes");
74 td.classList[value !== "Yes" ? "add" : "remove"]("no");
75 return value;
76 }
77 </script>
78 <script type="text/javascript" src="datalist.js"></script>
79
80 </body>
81 </html>