Andreas Hocevar
138 lines
3.7 KiB
HTML
138 lines
3.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<!--
|
|
Copyright 2007 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");
|
|
</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.js">autocompleterichremotedata.js</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("span", itemClassName);
|
|
dom_.appendChild(typeNode, dom_.createTextNode(itemType));
|
|
|
|
var nameNode = dom_.createDom("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 apple = function(item) {
|
|
return makeRichRow_(item, "Apple", "apple");
|
|
};
|
|
|
|
var citrus = function(item) {
|
|
return makeRichRow_(item, "Citrus", "citrus");
|
|
};
|
|
|
|
var berry = function(item) {
|
|
return makeRichRow_(item, "Berry", "berry");
|
|
};
|
|
|
|
var input = document.getElementById("txtInput");
|
|
var wikipedia = document.getElementById("wikipedia");
|
|
var ac = new goog.ui.ac.RichRemote("autocompleterichremotedata.js",
|
|
input);
|
|
|
|
// 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>
|