structure.html
<html>
<head>
<title>Instant Search</title>
<link rel="stylesheet" type="text/css" href="presentation.css" />
</head>
<body>
<div id="searchMe">
<input />
<button>Go!</button>
<dl></dl>
</div>
<script type="text/javascript" src="behavior.js"></script>
</body>
</html>
presentation.css
#searchMe { border: 1px solid black; margin:10px; padding:10px;}
#searchMe dl, #searchMe dl dd, #searchMe dl dt { margin:0; padding:0; }
behavior.js
var SEARCH = function() {
var $ = {};
return {
init : function(searchDiv) {
$.s = document.getElementById(searchDiv);
$.q = $.s.getElementsByTagName('INPUT')[0];
$.b = $.s.getElementsByTagName('BUTTON')[0];
$.r = $.s.getElementsByTagName('DL')[0];
$.head = document.getElementsByTagName('head')[0];
$.b.onmouseup = function() { SEARCH.doStuff(); };
},
doStuff : function() {
if ($.searchScript) {
$.head.removeChild($.searchScript);
}
$.searchScript = document.createElement('script');
var url='http://search.yahooapis.com/WebSearchService/V1/';
url+='webSearch?language=en&appid=SearchHack&output=json';
url+='&callback=SEARCH.showSearchResults&query='+$.q.value;
this.runScript($.searchScript, url);
},
runScript : function(s, url) {
s.type ='text/javascript';
s.charset ='utf-8';
s.src = url;
$.head.appendChild(s);
},
showSearchResults : function(z) {
$.r.innerHTML = '';
if (result.ResultSet) {
for (var i = 0; i < z.ResultSet.Result.length; i++) {
var dt = document.createElement('dt');
var a = document.createElement('a');
a.href = z.ResultSet.Result[i].Url;
a.target = '_vu';
a.innerHTML = z.ResultSet.Result[i].Title;
dt.appendChild(a);
$.r.appendChild(dt);
var dd = document.createElement('dd');
dd.innerHTML = z.ResultSet.Result[i].Summary;
$.r.appendChild(dd);
}
}
}
};
}();
window.onload = function() {
SEARCH.init('searchMe');
};