autocompleteremote.html 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778
  1. <!DOCTYPE html>
  2. <html>
  3. <!--
  4. Copyright 2007 The Closure Library Authors. All Rights Reserved.
  5. Use of this source code is governed by the Apache License, Version 2.0.
  6. See the COPYING file for details.
  7. -->
  8. <!--
  9. -->
  10. <head>
  11. <title>goog.ui.ac.Remote</title>
  12. <script src="../base.js"></script>
  13. <script>
  14. goog.require('goog.ui.ac.AutoComplete');
  15. goog.require('goog.ui.ac.InputHandler');
  16. goog.require('goog.ui.ac.Renderer');
  17. goog.require('goog.ui.ac.RemoteArrayMatcher');
  18. goog.require('goog.ui.ac.CachingMatcher');
  19. goog.require('goog.ui.ac.Remote');
  20. </script>
  21. <link rel="stylesheet" href="css/demo.css">
  22. <link rel="stylesheet" href="../css/autocomplete.css">
  23. </head>
  24. <body>
  25. <h1>goog.ui.ac.Remote</h1>
  26. Google Buzzwords:<br>
  27. <input type="text" id="txtInput" style="width:500px"><br>
  28. <p>
  29. This data is being pulled from the server at
  30. <a href="autocompleteremotedata.js">autocompleteremotedata.js</a>.
  31. </p>
  32. <p>
  33. Ideally the server would perform a search on the query and would only
  34. return relevant results; however, this response is static.
  35. </p>
  36. <script>
  37. var input = document.getElementById('txtInput');
  38. var ac = new goog.ui.ac.Remote('autocompleteremotedata.js',
  39. input);
  40. </script>
  41. <h1>goog.ui.ac.CachingMatcher on top of goog.ui.ac.RemoteArrayMatcher</h1>
  42. Google Buzzwords:<br>
  43. <input type="text" id="txtInput2" style="width:500px"><br>
  44. <p>
  45. This data is being pulled from the server at
  46. <a href="autocompleteremotedata.js">autocompleteremotedata.js</a>.
  47. </p>
  48. <p>
  49. This sets up a client-side cache of suggestions from the server, and matches
  50. against the client cache when the user types, while simultaneously making
  51. requests to the server in the background. The result feels more responsive
  52. than the goog.ui.ac.Remote, which has no client cache.
  53. </p>
  54. <script>
  55. var input = document.getElementById('txtInput2');
  56. var matcher = new goog.ui.ac.CachingMatcher(
  57. new goog.ui.ac.RemoteArrayMatcher('autocompleteremotedata.js'));
  58. // Note - we specify a very low throttle time (10ms) because we are serving
  59. // these responses directly from the client cache. By default, the
  60. // CachingMatcher already throttles the requests to its underlying matcher
  61. // to 1 request every 300ms.
  62. var inputHandler = new goog.ui.ac.InputHandler(null, null, false, 10);
  63. var renderer = new goog.ui.ac.Renderer();
  64. var autoComplete = new goog.ui.ac.AutoComplete(
  65. matcher, renderer, inputHandler);
  66. inputHandler.attachAutoComplete(autoComplete);
  67. inputHandler.attachInputs(input);
  68. </script>
  69. </body>
  70. </html>