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
<!DOCTYPE html>
<title>AutoComplete + Editor</title>
<body class="yui3-skin-sam">
<p>Type things here:</p>
<div id="editor"></div>
<script>
YUI().use('autocomplete', 'autocomplete-highlighters', 'autocomplete-filters', 'editor-base', 'escape', function(Y) {
var editorNode = Y.one('#editor'),
editor = new Y.EditorBase(),
ac = new Y.AutoComplete({
inputNode: editorNode,
queryDelimiter: ' ',
resultHighlighter: 'startsWith',
resultFilters: 'startsWith',
source: 'select * from search.suggest where query="{query}"',
yqlEnv: 'http://pieisgood.org/yql/tables.env'
});
editor.after('dom:blur', function (e) {
ac._afterListInputBlur();
});
editor.after('dom:focus', function (e) {
ac._afterListInputFocus();
});
editor.after('nodeChange', function (e) {
var type = e.changedType,
newVal;
if (type === 'keyup' || type === 'backspace' || type === 'delete') {
newVal = e.changedNode.get('text');
if (newVal !== ac.get('value')) {
ac.set('value', newVal, {src: Y.AutoCompleteBase.UI_SRC});
}
}
});
ac.on('select', function (e) {
var query = ac.get('query'),
result = e.result.text,
sel = new (editor.getInstance().Selection);
// Remove the portion of the result text that already exists in the
// editor so we don't insert it twice.
result = result.replace(new RegExp('^' + Y.Escape.regex(query), 'i'), '');
sel.insertContent(result);
editor.focus();
});
editor.render(editorNode);
ac.render();
});
</script>
</body>