Get Related Terms Instantly with Ajax

The Code

This script relies on the XML HTTP object to send and receive responses from a server, and to parse those responses into objects that JavaScript can manipulate. When the page loads, an XML HTTP object is created. The user-input text field has an onkeyup event, so that when the user's input has a keystroke, the getAlts( ) function contacts the Yahoo! Search Web Services, looking for related search terms. If there are no related terms, nothing happens. If related terms are found, the printResponse( ) function formats the related search terms as HTML and prints them to the page with the innerHTML property of a <div> tag below the form.

This code is a standard HTML file, and it doesn't need to reside on a web server. Simply open a text editor, such as Notepad, add the following code, and name the file relatedterms.html:

	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

	<html>
	<head>
			<title>Related Terms</title>
			<script language="javascript" type="text/javascript">
			// netscape.security.PrivilegeManager.
		enablePrivilege("UniversalBrowserAccess");
			var xmlhttp=false;
			/*@cc_on @*/
			/*@if (@_jscript_version >= 5)
			// Verify that the browser can load the xmlHttp object.
			 try {
			  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
			 } catch (e) {
			  try {
			   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			  } catch (E) {
			   xmlhttp = false;
			  }
			 }
			@end @*/	
			if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
			  xmlhttp = new XMLHttpRequest();
			}

			// Accepts a related term, and makes it a Yahoo! link 
			function getLink(r) { 
				var o = "<a href=\"http://search.yahoo.com/search?p="
				o = o + escape(r) + "\">" + r + "</a>";
				return o;
			}

			// Accepts the Yahoo! Search Web Services response, and
			// prints to the page as HTML
			function printResponse(xml) {
			  // netscape.security.PrivilegeManager.
		enablePrivilege("UniversalXPConnect");
			  var results = xml.getElementsByTagName("Result");
			  var numOfResults = results.length;
			  if (numOfResults > 0) {
			  var out = ""; 
			  for (var i=0;i<numOfResults;i++) { 
				out = out + "<li>" + getLink(results[i].firstChild.nodeValue) + 
"</li>";
		}
		var s = document.getElementById('suggest');
		s.innerHTML = "You might also try:<ul>" + out + "</ul>";
		}
	  }

	  // Accepts a full or partial search term, and looks for 
	  // related terms with a Yahoo! Search Web Services request 
	  function getAlts(t) {
		  var yurl = "http://api.search.yahoo.com/WebSearchService/V1/" 
		  yurl = yurl + "relatedSuggestion?appid=YahooDemo&query=" +  
escape(t); 
	  // netscape.security.PrivilegeManager. 
enablePrivilege("UniversalXPConnect"); 
		try {
			xmlhttp.open("GET", yurl, true);
		}
		catch (E) {
			alert(E);
		}         
		 xmlhttp.onreadystatechange = function() { 
			  if (xmlhttp.readyState==4) { 
				printResponse(xmlhttp.responseXML);
			  }
			}
			xmlhttp.send(null)
		}
		</script>
</head>

<body>
<h2>Yahoo! Related Terms</h2>
<form>
		<input name="txt" type="text" value="" onkeyup="getAlts(this.value)" />
</form> 
<div name="suggest" id="suggest"></div> 
</body> 
</html>

As you can see, the HTML for this page is straightforward, and the work is done in the JavaScript section in the <head> of the page. Be sure to request a unique application ID for the script and use it in the code.