autocompleterichremote.html | Explore in Territory

<!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>
chromium/third_party/google-closure-library/closure/goog/demos/autocompleterichremote.html
