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
|
<!DOCTYPE html>
<html>
<!--
Copyright The Closure Library Authors. All Rights Reserved.
Use of this source code is governed by the Apache License, Version 2.0.
See the COPYING file for details.
-->
<head>
<title>goog.ui.ac.RichRemote</title>
<script src="../base.js"></script>
<script>
goog.require("goog.array");
goog.require("goog.dom");
goog.require("goog.ui.ac.RichRemote");
goog.require('goog.dom.TagName');
</script>
<link rel="stylesheet" href="css/demo.css">
<link rel="stylesheet" href="../css/autocomplete.css">
<style type="text/css">
.apple {
background-color: #990033;
color: #FFFFFF;
margin: 3px;
font-style: italic;
}
.citrus {
background-color: #CCCC33;
color: #FFFFFF;
margin: 3px;
font-style: italic;
}
.berry {
background-color: #009933;
color: #FFFFFF;
margin: 3px;
font-style: italic;
}
</style>
</head>
<body>
<h1>goog.ui.ac.RichRemote</h1>
<p>
Fruit Selector:<br>
<input type="text" id="txtInput" style="width:500px"/>
<input type="checkbox" id="berryAllergy" onclick="setFilter()"/>
<label for="berryAllergy">berry allergy</label>
<input type="checkbox" id="setHighlighting"
onclick="setHighlighting()"/>
<label for="setHighlighting">standard highlighting</label>
<p>
This data is being pulled from the server at
<a href="autocompleterichremotedata.json">autocompleterichremotedata.json</a>.
</p>
<p>
Ideally the server would perform a search on the query and would only
return relevant results; however, this response is static.
</p>
</p>
<iframe id="wikipedia" width="900" height="600"></iframe>
<script>
var makeRichRow_ = function(item, itemType, itemClassName) {
item.type = itemType;
item.render = function(node, token) {
var dom_ = goog.dom.getDomHelper(node);
var typeNode = dom_.createDom(goog.dom.TagName.SPAN, itemClassName);
dom_.appendChild(typeNode, dom_.createTextNode(itemType));
var nameNode = dom_.createDom(goog.dom.TagName.SPAN);
dom_.appendChild(nameNode, dom_.createTextNode(item.name));
dom_.appendChild(node, typeNode);
dom_.appendChild(node, nameNode);
};
item.select = function(target) {
target.value = item.name;
wikipedia.src = item.url;
};
return item;
};
var input = document.getElementById("txtInput");
var wikipedia = document.getElementById("wikipedia");
var ac = new goog.ui.ac.RichRemote("autocompleterichremotedata.json",
input);
ac.setRowBuilder(function(type, item) {
var itemType = type[0].toUpperCase() + type.slice(1);
return makeRichRow_(item, itemType, type);
});
// Set the autocomplete"s rowFilter appropriately
var setFilter = function() {
var checkbox = document.getElementById("berryAllergy");
if (checkbox.checked) {
ac.setRowFilter(filterOutBerries);
} else {
ac.setRowFilter();
}
};
// Set the autocomplete"s standard highlighting
var setHighlighting = function() {
var checkbox = document.getElementById("setHighlighting");
ac.setUseStandardHighlighting(checkbox.checked);
};
// Do not include berries in the search results
var filterOutBerries = function(rows) {
var filterFunction = function(item) { return item.type != "Berry"; };
return goog.array.filter(rows, filterFunction);
};
// When the page loads, make sure to set the filter appropriately
window.onload = function() {
setFilter();
setHighlighting();
};
</script>
</body>
</html>
|
