bfilter/trunk/combo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Combobox example</TITLE>

<style type="text/css">
#textfilterholder {
        border:1px black solid;
        padding:0px;
        width:200px;
}
#filterholder {
        position:relative;
}

#textfilter {
        width:175px;
        font-size:12px;
        border: 0px black solid;
        height:20px;
}
#sel {
        width:200px;
        font-size:12px;
}
#dropdown {
        z-index:100;
        border: 0px black solid;
        width:200px;
        position:absolute;
        top:20px;
        left:0px;
}
#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="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');

        // 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.myfilter = new BFilter(headlines);

        self.document.myfilter.result = function (arr) {
                var el = self.document.myfilter.element_id('sel');
                el.options[el.options.length] = new Option(arr[0],arr[1]);
                return true;
        }

        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;
        }

        return self.document.myfilter.filter(value);
}

</script>


</HEAD>

<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" type="text"
 onKeyDown="combo_textbox_keydown(event);"
 onKeyUp="combo_filter(this.value);"
 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="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>

<div id="status">
</div>

<div style="color: #a0a0a0">
If this combobox isn't working for you, try running <tt>make combo</tt> to create
example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
</div>


</BODY>
</HTML>
1	dpavlin	11	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2			<HTML>
3			<HEAD>
4	dpavlin	24	<TITLE>Combobox example</TITLE>
5	dpavlin	11
6			<style type="text/css">
7			#textfilterholder {
8	dpavlin	33	border:1px black solid;
9	dpavlin	11	padding:0px;
10			width:200px;
11			}
12			#filterholder {
13			position:relative;
14			}
15
16			#textfilter {
17			width:175px;
18			font-size:12px;
19	dpavlin	33	border: 0px black solid;
20	dpavlin	11	height:20px;
21			}
22			#sel {
23			width:200px;
24			font-size:12px;
25			}
26	dpavlin	33	#dropdown {
27	dpavlin	11	z-index:100;
28			border: 0px black solid;
29	dpavlin	33	width:200px;
30	dpavlin	11	position:absolute;
31			top:20px;
32			left:0px;
33			}
34			#status {
35			z-index:10;
36			}
37	dpavlin	33	#down {
38			margin: 2px;
39			background: #c0c0c0;
40			border: 1px red solid;
41			padding-left: 4px;
42			padding-right: 4px;
43			}
44	dpavlin	11	</style>
45
46
47	dpavlin	33	<script type="text/javascript" src="combo-test.js"></script>
48	dpavlin	11	<script type="text/javascript" src="bfilter.js"></script>
49			<script type="text/javascript">
50
51	dpavlin	23	var combo_active = 1;
52	dpavlin	33	var combo_last_value = null;
53	dpavlin	23
54	dpavlin	33	var debug2_lines = 0;
55
56			function debug2(text) {
57			var el = self.document.myfilter.element_id('debug2');
58			debug2_lines++;
59			if (debug2_lines > 10) {
60			el.innerHTML = "...<br>";
61			debug2_lines = 0;
62			}
63			if (el) el.innerHTML += debug2_lines+": "+text+"<br>";
64			return true;
65			}
66
67			// keypress in dropdown
68			function combo_dropdown_keydown(event) {
69			var d = event.keyCode;
70
71			debug2("dropdown key: "+d);
72
73			var el_textbox = self.document.myfilter.element_id('textfilter');
74			var el_sel = self.document.myfilter.element_id('sel');
75
76			// return to textbox and hide results on
77			// enter, backspace, left, right, esc
78			if (d == 13 \|\| d == 8 \|\| d == 37 \|\| d == 39 \|\| d == 27) {
79			el_textbox.focus();
80			self.document.myfilter.clear_results();
81
82			// ignore backspace (to prevent back in history)
83			if (d == 8) return false;
84
85			if (d == 27) {
86			el_textbox.value = combo_last_value;
87			}
88
89			}
90
91			// up or down on first/last element?
92			var sel = el_sel.selectedIndex;
93			var max = el_sel.options.length - 1;
94			debug2("selected: "+sel+" max: "+max);
95			if ( (d == 38 && sel == 0) \|\| (d == 40 && sel == max) ) {
96			self.document.myfilter.clear_results();
97			el_textbox.value = combo_last_value;
98			el_textbox.focus();
99	dpavlin	23	combo_active = 0;
100			}
101
102	dpavlin	33	return true;
103
104	dpavlin	23	}
105
106	dpavlin	33	// keypress in textbox
107			function combo_textbox_keydown(e) {
108			var d = e.keyCode;
109			debug2("textbox key: "+d);
110	dpavlin	23
111	dpavlin	33	var el = self.document.myfilter.element_id('sel');
112			if (! el) return false;
113
114			combo_active = 0;
115
116			// up, down -- go to dropdown
117			if ((d == 38) \|\| (d == 40)) {
118			var el_sel = self.document.myfilter.element_id('sel');
119			// filter if no results
120			debug2("existing results: "+el_sel.options.length);
121			if (el_sel.options.length <= 0) {
122			var el_textbox = self.document.myfilter.element_id('textfilter');
123			self.document.myfilter.show_filter(el_textbox.value);
124			} else {
125			self.document.myfilter.show_results();
126			}
127			el_sel.focus();
128			return false;
129			}
130
131			// if not enter, show combo
132			if (d != 13) combo_active = 1;
133
134			// left, right -- hide dropdown
135			if (d == 37 \|\| d == 39) {
136			self.document.myfilter.clear_results();
137			return false;
138			}
139
140			return true;
141			}
142
143
144	dpavlin	11	function myfilter() {
145	dpavlin	23
146	dpavlin	30	self.document.myfilter = new BFilter(headlines);
147	dpavlin	25
148	dpavlin	30	self.document.myfilter.result = function (arr) {
149	dpavlin	33	var el = self.document.myfilter.element_id('sel');
150			el.options[el.options.length] = new Option(arr[0],arr[1]);
151	dpavlin	29	return true;
152	dpavlin	25	}
153
154	dpavlin	33	self.document.myfilter.clear_results = function () {
155			var el = self.document.myfilter.element_id('sel');
156			combo_active = 0;
157			el.selectedIndex = null;
158			el.options.length = 0;
159			el.style.display = 'none';
160			return true;
161	dpavlin	25	}
162	dpavlin	33
163			self.document.myfilter.show_results = function () {
164			var el_textbox = self.document.myfilter.element_id('textfilter');
165			var el_dropdown = self.document.myfilter.element_id('sel');
166			el_dropdown.style.display = '';
167			combo_last_value = el_textbox.value;
168			return true;
169			}
170
171			var el_textbox = self.document.myfilter.element_id('textfilter');
172
173			el_textbox.focus();
174			el_textbox.caretPos=1;
175			// el_textbox.select();
176	dpavlin	11	}
177
178	dpavlin	30	function combo_filter(value) {
179	dpavlin	23
180	dpavlin	33	debug2("combo filter: "+value+" ["+combo_active+"]");
181	dpavlin	23	if (! combo_active) {
182	dpavlin	25	return null;
183	dpavlin	23	}
184
185	dpavlin	30	return self.document.myfilter.filter(value);
186	dpavlin	23	}
187
188	dpavlin	11	</script>
189
190
191
192
193			</HEAD>
194
195			<BODY onload="myfilter();">
196
197	dpavlin	33	<div id="debug" style="float: right; width: 20em; font-size: 70%; color: gray;">
198			</div>
199			<div id="debug2" style="float: right; width: 20em; font-size: 70%; color: gray;">
200			</div>
201
202	dpavlin	11	<div id="filterholder">
203	dpavlin	23	<div id="textfilterholder">
204	dpavlin	33	<input autocomplete="off" id="textfilter" type="text"
205			onKeyDown="combo_textbox_keydown(event);"
206	dpavlin	30	onKeyUp="combo_filter(this.value);"
207	dpavlin	33	onClick="self.document.myfilter.clear_results();"
208			value="">
209			<img class="down" src="down.gif" alt="show alternatives" onClick="self.document.myfilter.show_filter(self.document.getElementById('textfilter').value);">
210			</div>
211	dpavlin	11
212	dpavlin	33	<div id="dropdown">
213			<select id="sel" size="5"
214			onKeyDown="combo_dropdown_keydown(event);"
215			onChange="self.document.getElementById('textfilter').value = this.options[this.selectedIndex].text;"
216			onClick="self.document.myfilter.clear_results();"
217			style="display: none;"
218			></select>
219	dpavlin	11	</div>
220
221	dpavlin	24	</div>
222
223	dpavlin	11	<div id="status">
224			</div>
225
226	dpavlin	24	<div style="color: #a0a0a0">
227			If this combobox isn't working for you, try running <tt>make combo</tt> to create
228			example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
229	dpavlin	11	</div>
230
231	dpavlin	33
232	dpavlin	11	</BODY>
233			</HTML>