Andreas Hocevar
79 lines
2.6 KiB
HTML
79 lines
2.6 KiB
HTML
<!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.Remote</title>
|
|
<script src="../base.js"></script>
|
|
<script>
|
|
goog.require('goog.ui.ac.AutoComplete');
|
|
goog.require('goog.ui.ac.InputHandler');
|
|
goog.require('goog.ui.ac.Renderer');
|
|
goog.require('goog.ui.ac.RemoteArrayMatcher');
|
|
goog.require('goog.ui.ac.CachingMatcher');
|
|
goog.require('goog.ui.ac.Remote');
|
|
</script>
|
|
<link rel="stylesheet" href="css/demo.css">
|
|
<link rel="stylesheet" href="../css/autocomplete.css">
|
|
</head>
|
|
<body>
|
|
<h1>goog.ui.ac.Remote</h1>
|
|
|
|
Google Buzzwords:<br>
|
|
<input type="text" id="txtInput" style="width:500px"><br>
|
|
<p>
|
|
This data is being pulled from the server at
|
|
<a href="autocompleteremotedata.js">autocompleteremotedata.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>
|
|
|
|
<script>
|
|
var input = document.getElementById('txtInput');
|
|
var ac = new goog.ui.ac.Remote('autocompleteremotedata.js',
|
|
input);
|
|
</script>
|
|
|
|
<h1>goog.ui.ac.CachingMatcher on top of goog.ui.ac.RemoteArrayMatcher</h1>
|
|
|
|
Google Buzzwords:<br>
|
|
<input type="text" id="txtInput2" style="width:500px"><br>
|
|
<p>
|
|
This data is being pulled from the server at
|
|
<a href="autocompleteremotedata.js">autocompleteremotedata.js</a>.
|
|
</p>
|
|
<p>
|
|
This sets up a client-side cache of suggestions from the server, and matches
|
|
against the client cache when the user types, while simultaneously making
|
|
requests to the server in the background. The result feels more responsive
|
|
than the goog.ui.ac.Remote, which has no client cache.
|
|
</p>
|
|
|
|
<script>
|
|
var input = document.getElementById('txtInput2');
|
|
|
|
var matcher = new goog.ui.ac.CachingMatcher(
|
|
new goog.ui.ac.RemoteArrayMatcher('autocompleteremotedata.js'));
|
|
// Note - we specify a very low throttle time (10ms) because we are serving
|
|
// these responses directly from the client cache. By default, the
|
|
// CachingMatcher already throttles the requests to its underlying matcher
|
|
// to 1 request every 300ms.
|
|
var inputHandler = new goog.ui.ac.InputHandler(null, null, false, 10);
|
|
var renderer = new goog.ui.ac.Renderer();
|
|
|
|
var autoComplete = new goog.ui.ac.AutoComplete(
|
|
matcher, renderer, inputHandler);
|
|
inputHandler.attachAutoComplete(autoComplete);
|
|
inputHandler.attachInputs(input);
|
|
</script>
|
|
</body>
|
|
</html>
|