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);
},
showSearchResults : function(result) {
if (result.ResultSet) {
var p = 'Search results found for ' + $.q.value + ': ';
alert(p + ' ' + result.ResultSet.totalResultsAvailable);
}
},
runScript : function(s, url) {
s.type ='text/javascript';
s.charset ='utf-8';
s.src = url;
$.head.appendChild(s);
}
};
}();
window.onload = function() {
SEARCH.init('searchMe');
};