| <!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> |
