Adding a Wavelength Search Box Code Snippet

In the other code snippet example, a predetermined feed of content from Wavelength appears in the user’s browser. The code can be adapted slightly to enable users to run keyword searches of Wavelength’s catalog. Wavelength also responds to keyword searches with Atom feeds. The sample code below illustrates how to install a Wavelength search box on a Webpage:

<!DOCTYPE html>
<html>
	<head>
		<title>My Web-page with a Wavelength Search Feed!</title>
		<style type="text/css">
			div.tab {
				display:table;
			}
			div.tr {
				display:table-row;
			}
			div.td {
				display:table-cell;
			}
		</style>
		<script src="https://www.google.com/jsapi" type="text/javascript"></script>
		<script type="text/javascript">
				
		var feedURL = false;
		var titlePrefix = "NASA-Wavelength Indexed Resources ";
		var feedLinkTitle = "Go to Wavelength for all items";

		google.load("feeds", "1");
				
		//this function decodes escaped entities of URLs from the Atom feed
		function entityDecode(input){
			var e = document.createElement('div');
			e.innerHTML = input;
			return e.childNodes.length === 0 ? "" : e.childNodes[0].nodeValue;
		}

		function searchWavelength(){
					 
			var container = document.getElementById("wavelengthFeed");
			container.innerHTML = "Searching Wavelength...";
			var countContainer = document.getElementById("osCount");
			countContainer.innerHTML = "";
			var linkContainer = document.getElementById("wavelengthLink");
			linkContainer.innerHTML = "";
		
			feedURL = document.getElementById("IDfeedURL").value;
			var searchTerm = document.getElementById("IDsearch").value;
			if(searchTerm.length > 0){
				//add the search term to the URL
				if(feedURL.indexOf("?") > 0){
					feedURL += "&qq=" + encodeURIComponent(searchTerm);
				}
				else{
					feedURL += "?qq=" + encodeURIComponent(searchTerm);
				}
			}
			if(feedURL.length > 0){
				var feed = new google.feeds.Feed(feedURL);
				feed.setResultFormat(google.feeds.Feed.MIXED_FORMAT);
				feed.load(function(result) {
					if (!result.error) {
						var OSnamespace = "http://a9.com/-/spec/opensearchrss/1.0/";
						var AtomNamespace = "http://www.w3.org/2005/Atom";
						var feedNode = result.xmlDocument.getElementsByTagNameNS(AtomNamespace, "feed");
						var osCountResult = result.xmlDocument.getElementsByTagNameNS("*", "totalResults");
						countContainer.appendChild(document.createTextNode(titlePrefix + "(First " + result.feed.entries.length + " of "+ osCountResult[0].textContent + ")"));
						var linkDom = document.createElement("a");
						linkDom.appendChild(document.createTextNode(feedLinkTitle));
						linkDom.setAttribute("href", entityDecode(result.feed.link));
						linkDom.setAttribute("target","_blank");
						linkContainer.appendChild(linkDom);
						container.innerHTML = "";
						var entryList = document.createElement("ul");
						container.appendChild(entryList);
						for (var i = 0; i < result.feed.entries.length; i++) {
							var entry = result.feed.entries[i];
							var entryItem = document.createElement("li");
							var alink = document.createElement("a");
							alink.appendChild(document.createTextNode(entry.title));
							alink.setAttribute("href", entry.link);
							entryItem.appendChild(alink);
							var sumSpan = document.createElement("span");
							sumSpan.setAttribute("style", "margin-left:5px;");
							sumSpan.appendChild(document.createTextNode(entityDecode(entry.content)));
							entryItem.appendChild(sumSpan);
							entryList.appendChild(entryItem);
						}
					}
				});
			}
		}
		</script>
	</head>
	<body>
		<h1>Feed Demo</h1>
		<div class="tab">
			<div class="tr">
				<div class="td">Feed URL</div>
				<div class="td"><input id="IDfeedURL" value="http://api.nasawavelength.org/search/cow-facets-atom" type="text" size="100" /></div>
			</div>
			<div class="tr">
				<div class="td">Search term</div>
				<div class="td"><input id="IDsearch" value="" type="text"/></div>
			</div>
			<div class="tr">
				<div class="td"></div>
				<div class="td">
					<button onclick="javascript:searchWavelength();">Search</button>
				</div>
			</div>
		</div>
		<h4 id="osCount"></h4>
		<p id="wavelengthLink"></p>
		<div id="wavelengthFeed"></div>
	</body>
</html>