JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0"></script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>Google AJAX Search API Sample</title>
<script src="http://www.google.com/jsapi?key=AIzaSyA5m1Nc8ws2BbmPRwKu5gFradvD_hgq6G0" type="text/javascript"></script>
<script type="text/javascript">
</script>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="content">Loading...</div>
</body>
</html>
JavaScript
google.load('search', '1');
function OnLoad() {
// create a tabbed mode search control
var tabbed = new google.search.SearchControl();
// create our searchers. There will now be 3 tabs.
tabbed.addSearcher(new google.search.WebSearch());
// draw in tabbed layout mode
var drawOptions = new google.search.DrawOptions();
drawOptions.setDrawMode(google.search.SearchControl.DRAW_MODE_TABBED);
// Draw the tabbed view in the content div
tabbed.draw(document.getElementById("content"), drawOptions);
var wait = 0;
var inputBox = document.getElementsByName("search")[0];
inputBox.onkeyup = function(){
clearTimeout (wait);
wait = setTimeout(function(){
tabbed.execute(inputBox.value);
},1000);
}
}
google.setOnLoadCallback(OnLoad);