forked from dtao/angular-fast-matcher
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
211 lines (182 loc) · 9 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
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
<!DOCTYPE html>
<html ng-app="FastMatcherDemo">
<head>
<title>angular-fast-matcher</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootswatch/3.3.0/paper/bootstrap.min.css" />
<link rel="stylesheet" href="//yandex.st/highlightjs/8.0/styles/mono-blue.min.css">
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="//yandex.st/highlightjs/8.0/highlight.min.js"></script>
<script src="angularFastMatcher.js"></script>
<script src="demo.js"></script>
<style>
body { overflow-y: scroll; }
.page-header { text-align: center; }
.page-header a { font-weight: bold; }
.nav { margin-bottom: 15px; }
.compact-book-view { overflow-x: hidden; text-overflow: ellipsis; }
.modal { display: block; background-color: rgba(0, 0, 0, 0.75); }
.modal-dialog {
display: block;
position: absolute;
width: 600px;
max-height: 600px;
top: calc(50% - 300px);
left: calc(50% - 300px);
}
pre { padding: 0; }
pre code {
font-family: "Consolas", "Inconsolata", monospace;
font-size: 110%;
}
.attribute-list li {
margin-bottom: 12px;
}
</style>
<script>
hljs.initHighlightingOnLoad();
</script>
</head>
<body ng-controller="DemoController as ctrl">
<div class="container">
<div class="page-header hidden-xs">
<h1>angular-fast-matcher demo</h1>
<p class="lead">
<strong>angular-fast-matcher</strong> is an Angular directive that uses the
<a href="https://github.com/dtao/fast-matcher">fast-matcher</a> library to
provide autocomplete results.<br />
See the <a href="#usage" ng-click="ctrl.showPage('usage')">usage</a> section for details
on how to use it.
</p>
<p>
The data for this demo is taken from
<a href="http://www.gutenberg.org/" target="_blank">Project Gutenberg</a>.
</p>
</div>
<h3 class="text-right visible-xs">
angular-fast-matcher-demo<br />
<small><a href="https://github.com/dtao/angular-fast-matcher">Source on GitHub</a></small>
</h3>
<ul class="nav nav-pills">
<li ng-class="{active: ctrl.isCurrentPage('demo')}">
<a href="#demo" ng-click="ctrl.showPage('demo')">Demo</a>
</li>
<li ng-class="{active: ctrl.isCurrentPage('usage')}">
<a href="#usage" ng-click="ctrl.showPage('usage')">Usage</a>
</li>
</ul>
<div id="demo" ng-show="ctrl.isCurrentPage('demo')">
<div class="form-group">
<input type="text" name="prefix" class="form-control"
fast-matcher
fast-matcher-source="booksPromise"
fast-matcher-output="matchingBooks"
fast-matcher-properties="title, titleBase, author, authorFullName"
fast-matcher-index-changed="ctrl.setCurrentBook(index)"
fast-matcher-item-selected="ctrl.selectBook(item)"
placeholder="{{inputPlaceholder}}"
ng-disabled="!loaded"
ng-model="prefix" />
<p class="help-block">You can search by title or author.</p>
</div>
<div class="list-group">
<a ng-repeat="book in matchingBooks"
href="http://www.gutenberg.org/ebooks/{{book.id}}"
target="_blank"
class="list-group-item"
ng-class="{active: $index == currentBookIndex}">
<div class="full-book-view hidden-xs">
<h4 class="list-group-item-heading" ng-bind="book.title"></h4>
<p class="list-group-item-text" ng-bind="book.author"></p>
</div>
<div class="compact-book-view visible-xs">
<strong ng-bind="book.title"></strong>
<small ng-bind="book.author"></small>
</div>
</a>
</div>
</div>
<div id="usage" ng-show="ctrl.isCurrentPage('usage')">
<p>
Attach the directive to an <code><input></code> element with the following
attributes.
</p>
<h3>Required</h3>
<ul class="attribute-list">
<li>
<strong><code>fast-matcher</code></strong>
</li>
<li>
<strong><code>fast-matcher-source</code></strong>
<p>Specify either an array or promise that resolves to an array. This will be
the underlying source from which autocomplete results are fetched.</p>
</li>
<li>
<strong><code>fast-matcher-output</code></strong>
<p>Specify the array to be populated with autocomplete results. If it doesn't
already exist, the directive will create it.</p>
<p>Note that this array will be updated in-place.</p>
</li>
</ul>
<h3>Optional</h3>
<ul class="attribute-list">
<li>
<strong><code>fast-matcher-property</code></strong>
(or <code>fast-matcher-properties</code>)
<p>The name of the property to access from each element of the underlying
source. For example if the data source is an array of book objects and you want
to provide autocompletion by title, you would specify 'title' here.</p>
<p>You can also specify multiple properties (with fast-matcher-properties),
separated by commas and/or spaces. In this case the directive will search across
all properties for matches.</p>
<p>You don't have to include this attribute if the data source is just a list of
strings.</p>
</li>
<li>
<strong><code>fast-matcher-limit</code></strong>
<p>The maximum number of matches to find.</p>
</li>
<li>
<strong><code>fast-matcher-any-word</code></strong>
<p>Whether to support matching by any word (not just the first word) in a
string.</p>
</li>
<li>
<strong><code>fast-matcher-index-changed</code></strong>
<p>An expression to evaluate, with <code>index</code> set to the index of the
currently selected item, whenever it changes. This is to support keyboard-based
selection (letting the user hit Up/Down to highlight items in the list).</p>
</li>
<li>
<strong><code>fast-matcher-item-selected</code></strong>
<p>An expression to evaluate, with <code>item</code> set to the selected item,
when an item is selected from the list of autocompletion results. This will be
called when the user selects an item and hits Enter.</p>
</li>
</ul>
<h3>Example</h3>
<pre ng-non-bindable><code class="html"><div ng-controller="BooksController as ctrl">
<input type="text"
fast-matcher
fast-matcher-source="books"
fast-matcher-output="matchedBooks"
fast-matcher-properties="author, title"
fast-matcher-index-changed="ctrl.setCurrentBook(index)"
fast-matcher-item-selected="ctrl.selectBook(item)" />
<!--
You can put this list anywhere on the page and style it however you want.
In fact you can put it multiple places. Or nowhere. It also doesn't have to be
a <ul> element. It can be anything.
-->
<ul>
<li ng-repeat="book in matchedBooks" ng-class="{active: ctrl.isCurrentBook($index)}">
<div class="title" ng-bind="book.title"></div>
<div class="author" ng-bind="book.author"></div>
</li>
</ul>
</div></code></pre>
</div>
</div>
<a href="https://github.com/dtao/angular-fast-matcher" class="hidden-xs"><img style="position: absolute; top: 0; left: 0; border: 0;" src="https://camo.githubusercontent.com/8b6b8ccc6da3aa5722903da7b58eb5ab1081adee/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f6c6566745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_left_orange_ff7600.png"></a>
</body>
</html>