-
Notifications
You must be signed in to change notification settings - Fork 25
/
rich-html-textarea.html
95 lines (82 loc) · 3.7 KB
/
rich-html-textarea.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
<!DOCTYPE html>
<html>
<head>
<title>Textarea autocomplete demo [Rich HTML textarea] - by Algolia</title>
<meta name="viewport" content="width=device-width, user-scalable=no">
<!-- Bootstrap -->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/style.css">
<link rel="shortcut icon" href="./favicon.ico">
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-6 col-sm-offset-3">
<h3>Mention your favorite actors using the '@' key<br>
<small>For instance: <i>"Loved the last movie with <mark>@Tom</mark>..."</i></small>
</h3>
<div class="form-control" id="autocomplete-textarea" contenteditable="true"></div>
<p>
<br />
Read the
<a href="https://www.algolia.com/doc/guides/search/autocomplete-textarea">full guide</a> or check the code on
<a href="https://github.com/algolia/demo-textarea-autocomplete/blob/master/rich-html-textarea.html">GitHub</a>.
</p>
</div>
</div>
</div>
<script src="//cdn.jsdelivr.net/jquery/1/jquery.min.js"></script>
<!-- Text Autocomplete plugin -->
<script src="assets/jquery.textcomplete.min.js"></script>
<!-- Algolia Search API Client - latest version -->
<script src="//cdn.jsdelivr.net/algoliasearch/3/algoliasearch.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// #1 - Search configuration - to replace with your own
var ALGOLIA_APPID = 'latency';
var ALGOLIA_SEARCH_APIKEY = '6be0576ff61c053d5f9a3225e2a90f76';
var ALGOLIA_INDEX_NAME = 'actors';
var NB_RESULTS_DISPLAYED = 5;
// #2- Algolia Client Initialization
var algoliaClient = new algoliasearch(ALGOLIA_APPID, ALGOLIA_SEARCH_APIKEY);
var index = algoliaClient.initIndex(ALGOLIA_INDEX_NAME);
var lastQuery = '';
$('#autocomplete-textarea').textcomplete([
{
// #3 - Rgular experession used to trigger search
match: /(^|\s)@(\w*(?:\s*\w*)*)$/,
// #4 - Function called at every new keystroke
search: function(query, callback) {
lastQuery = query;
index.search(lastQuery, { hitsPerPage: NB_RESULTS_DISPLAYED })
.then(function searchSuccess(content) {
if (content.query === lastQuery) {
callback(content.hits);
}
})
.catch(function searchFailure(err) {
console.error(err);
});
},
// #5 - Template used to display each result obtained by the Algolia API
template: function (hit) {
// Returns the highlighted version of the name attribute
return hit._highlightResult.name.value;
},
// #6 - Template used to display the selected result in the contenteditable's div
replace: function (hit) {
var html = '<a class="tag-item" href="">';
html += '<div class="picture-wrapper"><img src="//image.tmdb.org/t/p/w45/'+ hit.image_path +'" /></div>';
html += '<span class="label">' + hit.name + '</span></a>';
return html;
}
}
], {
// #7 - Special adapter to handle HTMLContentEditable divs
adapter: $.fn.textcomplete.HTMLContentEditable,
footer: '<div style="text-align: center; display: block; font-size:12px; margin: 5px 0 0 0;">Powered by <a href="http://www.algolia.com"><img src="https://www.algolia.com/assets/algolia128x40.png" style="height: 14px;" /></a></div>'
});
});
</script>
</body>
</html>