richremote.js 4.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117
  1. // Copyright 2007 The Closure Library Authors. All Rights Reserved.
  2. //
  3. // Licensed under the Apache License, Version 2.0 (the "License");
  4. // you may not use this file except in compliance with the License.
  5. // You may obtain a copy of the License at
  6. //
  7. // http://www.apache.org/licenses/LICENSE-2.0
  8. //
  9. // Unless required by applicable law or agreed to in writing, software
  10. // distributed under the License is distributed on an "AS-IS" BASIS,
  11. // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
  12. // See the License for the specific language governing permissions and
  13. // limitations under the License.
  14. /**
  15. * @fileoverview Factory class to create a rich autocomplete that will match
  16. * from an array of data provided via ajax. The server returns a complex data
  17. * structure that is used with client-side javascript functions to render the
  18. * results.
  19. *
  20. * The server sends a list of the form:
  21. * [["type1", {...}, {...}, ...], ["type2", {...}, {...}, ...], ...]
  22. * The first element of each sublist is a string designating the type of the
  23. * hashes in the sublist, each of which represents one match. The type string
  24. * must be the name of a function(item) which converts the hash into a rich
  25. * row that contains both a render(node, token) and a select(target) method.
  26. * The render method is called by the renderer when rendering the rich row,
  27. * and the select method is called by the RichInputHandler when the rich row is
  28. * selected.
  29. *
  30. * @see ../../demos/autocompleterichremote.html
  31. */
  32. goog.provide('goog.ui.ac.RichRemote');
  33. goog.require('goog.ui.ac.AutoComplete');
  34. goog.require('goog.ui.ac.Remote');
  35. goog.require('goog.ui.ac.Renderer');
  36. goog.require('goog.ui.ac.RichInputHandler');
  37. goog.require('goog.ui.ac.RichRemoteArrayMatcher');
  38. /**
  39. * Factory class to create a rich autocomplete widget that autocompletes an
  40. * inputbox or textarea from data provided via ajax. The server returns a
  41. * complex data structure that is used with client-side javascript functions to
  42. * render the results.
  43. *
  44. * @param {string} url The Uri which generates the auto complete matches.
  45. * @param {Element} input Input element or text area.
  46. * @param {boolean=} opt_multi Whether to allow multiple entries; defaults
  47. * to false.
  48. * @param {boolean=} opt_useSimilar Whether to use similar matches; e.g.
  49. * "gost" => "ghost".
  50. * @constructor
  51. * @extends {goog.ui.ac.Remote}
  52. */
  53. goog.ui.ac.RichRemote = function(url, input, opt_multi, opt_useSimilar) {
  54. // Create a custom renderer that renders rich rows. The renderer calls
  55. // row.render(node, token) for each row.
  56. var customRenderer = {};
  57. customRenderer.renderRow = function(row, token, node) {
  58. return row.data.render(node, token);
  59. };
  60. /**
  61. * A standard renderer that uses a custom row renderer to display the
  62. * rich rows generated by this autocomplete widget.
  63. * @type {goog.ui.ac.Renderer}
  64. * @private
  65. */
  66. this.renderer_ = new goog.ui.ac.Renderer(null, customRenderer);
  67. /**
  68. * A remote matcher that parses rich results returned by the server.
  69. * @type {goog.ui.ac.RichRemoteArrayMatcher}
  70. * @private
  71. */
  72. this.matcher_ = new goog.ui.ac.RichRemoteArrayMatcher(url, !opt_useSimilar);
  73. /**
  74. * An input handler that calls select on a row when it is selected.
  75. * @type {goog.ui.ac.RichInputHandler}
  76. * @private
  77. */
  78. var inputhandler =
  79. new goog.ui.ac.RichInputHandler(null, null, !!opt_multi, 300);
  80. // Create the widget and connect it to the input handler.
  81. goog.ui.ac.AutoComplete.call(
  82. this, this.matcher_, this.renderer_, inputhandler);
  83. inputhandler.attachAutoComplete(this);
  84. inputhandler.attachInputs(input);
  85. };
  86. goog.inherits(goog.ui.ac.RichRemote, goog.ui.ac.Remote);
  87. /**
  88. * Set the filter that is called before the array matches are returned.
  89. * @param {Function} rowFilter A function(rows) that returns an array of rows as
  90. * a subset of the rows input array.
  91. */
  92. goog.ui.ac.RichRemote.prototype.setRowFilter = function(rowFilter) {
  93. this.matcher_.setRowFilter(rowFilter);
  94. };
  95. /**
  96. * Sets the function building the rows.
  97. * @param {goog.ui.ac.RichRemoteArrayMatcher.RowBuilder} rowBuilder
  98. * A function(type, response) converting the type and the server response to
  99. * an object with two methods: render(node, token) and select(target).
  100. */
  101. goog.ui.ac.RichRemote.prototype.setRowBuilder = function(rowBuilder) {
  102. this.matcher_.setRowBuilder(rowBuilder);
  103. };