--- trunk/combo.html	2004/09/24 16:58:08	30
+++ trunk/combo.html	2004/09/25 22:14:22	33
@@ -5,7 +5,7 @@
 
 <style type="text/css">
 #textfilterholder {
-	border:1px black solid
+	border:1px black solid;
 	padding:0px;
 	width:200px;
 }
@@ -16,17 +16,17 @@
 #textfilter {
 	width:175px;
 	font-size:12px;
-	border: 0px black solid
+	border: 0px black solid;
 	height:20px;
 }
 #sel {
 	width:200px;
 	font-size:12px;
 }
-#results {
+#dropdown {
 	z-index:100;
 	border: 0px black solid;
-	width:200px;;
+	width:200px;
 	position:absolute;
 	top:20px;
 	left:0px;
@@ -34,52 +34,150 @@
 #status {
 z-index:10;
 }
+#down {
+	margin: 2px;
+	background: #c0c0c0;
+	border: 1px red solid;
+	padding-left: 4px;
+	padding-right: 4px;
+}
 </style>
 
 
-<script type="text/javascript" src="bfilter.js"></script>
 <script type="text/javascript" src="combo-test.js"></script>
+<script type="text/javascript" src="bfilter.js"></script>
 <script type="text/javascript">
 
 var combo_active = 1;
+var combo_last_value = null;
+
+var debug2_lines = 0;
+
+function debug2(text) {
+	var el = self.document.myfilter.element_id('debug2');
+	debug2_lines++;
+	if (debug2_lines > 10) {
+		el.innerHTML = "...<br>";
+		debug2_lines = 0;
+	}
+	if (el) el.innerHTML += debug2_lines+": "+text+"<br>";
+	return true;
+}
+
+// keypress in dropdown
+function combo_dropdown_keydown(event) {
+	var d = event.keyCode;
+
+	debug2("dropdown key: "+d);
+
+	var el_textbox = self.document.myfilter.element_id('textfilter');
+	var el_sel = self.document.myfilter.element_id('sel');
 
-function combo_onKeyDown(event) {
-	//debug("event: "+event.keyCode);
-	if (event.keyCode == 13) {
-		var el = self.document.myfilter.element_id('textfilter');
-		if (el) el.focus();
-		
-		el = self.document.myfilter.element_id('results');
-		if (el) el.innerHTML = '';
-	
+	// return to textbox and hide results on
+	// enter, backspace, left, right, esc
+	if (d == 13 || d == 8 || d == 37 || d == 39 || d == 27) {
+		el_textbox.focus();
+		self.document.myfilter.clear_results();
+
+		// ignore backspace (to prevent back in history)
+		if (d == 8)  return false;
+
+		if (d == 27) {
+			el_textbox.value = combo_last_value;
+		}
+
+	}
+
+	// up or down on first/last element?
+	var sel = el_sel.selectedIndex;
+	var max = el_sel.options.length - 1;
+	debug2("selected: "+sel+" max: "+max);
+	if ( (d == 38 && sel == 0) || (d == 40 && sel == max) ) {
+		self.document.myfilter.clear_results();
+		el_textbox.value = combo_last_value;
+		el_textbox.focus();
 		combo_active = 0;
 	}
 
+	return true;
+
+}
+
+// keypress in textbox
+function combo_textbox_keydown(e) {
+	var d = e.keyCode;
+	debug2("textbox key: "+d);
+
+	var el = self.document.myfilter.element_id('sel');
+	if (! el) return false;
+
+	combo_active = 0;
+
+	// up, down -- go to dropdown
+	if ((d == 38) || (d == 40)) {
+		var el_sel = self.document.myfilter.element_id('sel');
+		// filter if no results
+		debug2("existing results: "+el_sel.options.length);
+		if (el_sel.options.length <= 0) {
+			var el_textbox = self.document.myfilter.element_id('textfilter');
+			self.document.myfilter.show_filter(el_textbox.value);
+		} else {
+			self.document.myfilter.show_results();
+		}
+		el_sel.focus();
+		return false;
+	}
+
+	// if not enter, show combo
+	if (d != 13) combo_active = 1;
+
+	// left, right -- hide dropdown
+	if (d == 37 || d == 39) {
+		self.document.myfilter.clear_results();
+		return false;
+	}
+
+	return true;
 }
 
 
 function myfilter() {
 
-	self.document.getElementById('textfilter').focus();
-	self.document.getElementById('textfilter').caretPos=1;
-//	self.document.getElementById('textfilter').select();
 	self.document.myfilter = new BFilter(headlines);
 
 	self.document.myfilter.result = function (arr) {
-		this.results_html += '<option value="'+arr[1]+'">'+
-			arr[0] +
-			'</option>';
+		var el = self.document.myfilter.element_id('sel');
+		el.options[el.options.length] = new Option(arr[0],arr[1]);
 		return true;
 	}
 
-	// this function is called when updating innerHTML with results
-	self.document.myfilter.display = function () {
-		return '<select id="sel" size="5" onKeyDown="combo_onKeyDown(event);" onChange="self.document.getElementById(\'textfilter\').value = this.options[this.selectedIndex].text;">'+this.results_html+'</select>';
+	self.document.myfilter.clear_results = function () {
+		var el = self.document.myfilter.element_id('sel');
+		combo_active = 0;
+		el.selectedIndex = null;
+		el.options.length = 0;
+		el.style.display = 'none';
+		return true;
+	}
+
+	self.document.myfilter.show_results = function () {
+		var el_textbox = self.document.myfilter.element_id('textfilter');
+		var el_dropdown = self.document.myfilter.element_id('sel');
+		el_dropdown.style.display = '';
+		combo_last_value = el_textbox.value;
+		return true;
 	}
+
+	var el_textbox = self.document.myfilter.element_id('textfilter');
+
+	el_textbox.focus();
+	el_textbox.caretPos=1;
+//	el_textbox.select();
 }
 
 function combo_filter(value) {
 
+	debug2("combo filter: "+value+" ["+combo_active+"]");
 	if (! combo_active) {
 		return null;
 	}
@@ -87,15 +185,6 @@
 	return self.document.myfilter.filter(value);
 }
 
-function keypress(e) {
-	var d = e.keyCode;
-	if ((d == 37) || (d == 38) || (d == 39) || (d == 40)) {
-		if (self.document.getElementById('sel'))	self.document.getElementById('sel').focus();
-	}
-
-	if (d != 13) combo_active = 1;
-}
-
 </script>
 
 
@@ -105,14 +194,28 @@
 
 <BODY onload="myfilter();">
 
+<div id="debug" style="float: right; width: 20em; font-size: 70%; color: gray;">
+</div>
+<div id="debug2" style="float: right; width: 20em; font-size: 70%; color: gray;">
+</div>
+
 <div id="filterholder">
 <div id="textfilterholder">
-<input autocomplete="off" id="textfilter" name="textfilter" type="text"
- onKeyDown="keypress(event);"
+<input autocomplete="off" id="textfilter" type="text"
+ onKeyDown="combo_textbox_keydown(event);"
  onKeyUp="combo_filter(this.value);"
-value=""></div>
+ onClick="self.document.myfilter.clear_results();"
+value="">
+<img class="down" src="down.gif" alt="show alternatives" onClick="self.document.myfilter.show_filter(self.document.getElementById('textfilter').value);">
+</div>
 
-<div id="results">
+<div id="dropdown">
+<select id="sel" size="5"
+ onKeyDown="combo_dropdown_keydown(event);"
+ onChange="self.document.getElementById('textfilter').value = this.options[this.selectedIndex].text;"
+ onClick="self.document.myfilter.clear_results();"
+ style="display: none;"
+></select>
 </div>
 
 </div>
@@ -125,5 +228,6 @@
 example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
 </div>
 
+
 </BODY>
 </HTML>