<script type="text/javascript">
	//<![CDATA[
	/* 
	 * This example is from the book _Ajax: The Definitive Guide_ by Anthony T. Holdener III.
	 * Written by Anthony T. Holdener III.  Copyright (C) 2008 O'Reilly Media, Inc.
	 * You may study, use, modify, and distribute this example for any purpose.
	 * This example is provided WITHOUT WARRANTY either expressed or implied.
	 */
	/* Example 16-4. JavaScript for giving search hints to the user. */

	/* This variable, hintRequest, will handle all Ajax calls for hints */
	var hintRequest = null;

	/**
	 * This function, fetchHints, is called on a keypress in the /searchBox/
	 * <input> element and sends an XHR to the server to get hints based on
	 * what the user typed, which are then displayed to the user when
	 * received.
	 *
	 * @param {Event} e The event calling the function.
	 * @return Returns true so other actions go on as planned within this event.
	 * @type Boolean
	 * @see Prototype#emptyFunction
	 * @see Ajax#Request
	 * @see Element#show
	 */
	function fetchHints(e) {
		e = ((e) ? e : window.event);
		var input = ((e.srcElement) ? e.srcElement : e.target);

		/* Is the client already trying to get hints? */
		if (hintRequest) {
			hintRequest.onSuccess = Prototype.emptyFunction;
			hintRequest.onFailure = Prototype.emptyFunction;
		}
		/* Is there anything to search on? */
		if (input.value)
			/* Get hints based on the latest text in the input's value */
			hintRequest = new Ajax.Request('getHint.php', {
				method: 'post',
				parameters: { hintMe: 1, searchString: input.value },
				onSuccess: function(xhrResponse) {
					/* Did we get a good response? */
					if (xhrResponse.responseText != 0) {
						$('myHints').innerHTML = xhrResponse.responseText;
						$('myHints').show();
					}
					hintRequest = null;
				},
				onFailure: function(xhrResponse) {
					hintRequest = null;
				}
			});
		return (true);
	}

	/**
	 * This function, body_onload, is called when the page finishes loading, and
	 * hides any elements that should be hidden and sets a /keyup/ event on the
	 * /searchBox/ <input> element as well as a /blur/ event to hide /myHints/.
	 */
	function body_onload() {
		$('myHints').hide();
		$('myResults').hide();
		Event.observe($('searchBox'), 'keyup', fetchHints, false);
		Event.observe($('searchBox'), 'blur', $('myHints').hide.bind($('myHints')), false);
	}
	//]]>
</script>