This repository has been archived by the owner on Aug 31, 2022. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 7
/
index.html
123 lines (102 loc) · 5.53 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="index.css">
<link rel="stylesheet" href="lib/ext/menu.css">
<style>
[data-menu] ol:empty:before {
content: "No results.";
font-style: italic;
}
.a11y-only {
position: absolute;
left: -9999px;
}
</style>
<script src="lib/shoestring-dev.js"></script>
<script src="lib/ext/menu.js"></script>
<script src="src/core.js"></script>
<!-- optional if you're not using a DOM source for data -->
<script src="src/dom.js"></script>
<!-- optional if you're not using an HTML AJAX source for data -->
<script src="src/ajax-html.js"></script>
<script src="src/init.js"></script>
</head>
<body class="docs">
<div class="header">
<a href="http://filamentgroup.com/"><h1 id="fg-logo">Filament Group</h1></a>
</div>
<div class="autocomplete-docs">
<p class="docs-intro">This is a demo for a lightweight auto-complete that can be populated via JSON or by DOM element text. Visit the <a href="https://github.com/filamentgroup/auto-complete">Github project page</a> for documentation.</p>
<p class="docs-intro">An input with auto-complete. <b>NOTE:</b> The data being served is a static mockup from <code>$PROJECT_DIR/demo.json</code>.</p>
<pre class="language-html">
<<span class="function-name">input</span> <span class="variable-name">data-autocomplete</span>=<span class="string">"./demo.json"</span> <span class="variable-name">aria-controls</span>=<span class="string">"list"</span> <span class="variable-name">aria-haspopup</span>=<span class="string">"true"</span>>
<<span class="function-name">div</span> <span class="variable-name">class</span>=<span class="string">"suggest menu"</span> data-menu>
<<span class="function-name">ol</span>>
</<span class="function-name">ol</span>>
</<span class="function-name">div</span>>
</pre>
<input data-autocomplete="demo.json" data-autocomplete-helptext="Use down key to access and browse suggestions after input. Confirm your choice with enter key, or esc key to close suggestions box.">
<div class="suggest menu" data-menu>
<ol>
</ol>
</div>
<h2 class="docs">Auto-complete with Select</h2>
<p class="docs">An input with auto-complete where the data is pulled from the children of an associated DOM element. Here the DOM element is a select menu.</p>
<pre class="language-html">
<<span class="function-name">label</span> <span class="variable-name">class</span>=<span class="string">"autocomplete"</span>>
<<span class="function-name">input</span> <span class="variable-name">data-autocomplete-dom</span>=<span class="string">"#categories"</span> <span class="variable-name">data-best-match</span> <span class="variable-name">aria-controls</span>=<span class="string">"list"</span> <span class="variable-name">aria-haspopup</span>=<span class="string">"true"</span> >
<<span class="function-name">div</span> <span class="variable-name">class</span>=<span class="string">"suggest menu"</span> data-menu>
<<span class="function-name">ol</span>>
</<span class="function-name">ol</span>>
</<span class="function-name">div</span>>
</<span class="function-name">label</span>>
<<span class="function-name">select</span> <span class="variable-name">id</span>=<span class="string">"categories"</span>>
<<span class="function-name">option value="Foo"</span>>Foo</<span class="function-name">option</span>>
<<span class="function-name">option value="Bar"</span>>Bar</<span class="function-name">option</span>>
<<span class="function-name">option value="Baz"</span>>Baz</<span class="function-name">option</span>>
<<span class="function-name">option value="Bak"</span>>Bak</<span class="function-name">option</span>>
</<span class="function-name">select</span>>
</pre>
<label class="autocomplete">
<input data-autocomplete-dom="#categories" data-best-match data-autocomplete-helptext="Use down key to access and browse suggestions after input. Confirm your choice with enter key, or esc key to close suggestions box.">
<div class="suggest menu" data-menu>
<ol>
</ol>
</div>
</label>
<div class="btn btn-primary btn-select">
<span class="ki-icon ki-icon-carat-down"></span>
<select id="categories">
<option value="Foo">Foo</option>
<option value="Bar">Bar</option>
<option value="Baz">Baz</option>
<option value="Bak">Bak</option>
</select>
</div>
<h2 class="docs">JSON response</h3>
<p class="docs">The response from the server should be an array of strings matching the value of the input.</p>
<pre><code>
[
"foo",
"bar"
]
</code></pre>
<h2 class="docs">Dependencies</h3>
<ul class="docs">
<li>Menu (<a alt="repository" href="https://github.com/filamentgroup/menu">repository</a>)</li>
</ul>
<h2 class="docs">Ajax Response</h2>
<label class="autocomplete">
<input data-autocomplete-ajax-html="sampleajax.html" data-filter-selector="span" data-value-selector="" data-autocomplete-helptext="Use down key to access and browse suggestions after input. Confirm your choice with enter key, or esc key to close suggestions box.">
<div class="suggest menu" data-menu>
<ol>
</ol>
</div>
</label>
</div>
<script>
$( function(){ $(document).trigger( "enhance" ); });
</script>
</body>
</html>