accessibility-developer-tools
Version:
This is a library of accessibility-related testing and utility code.
139 lines (119 loc) • 3.85 kB
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");
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.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(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 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>