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() {
alert($.q.value);
}
};
}();
window.onload = function() {
SEARCH.init('searchMe');
};