1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"> |
2 |
<HTML> |
3 |
<HEAD> |
4 |
<TITLE>Combobox example</TITLE> |
5 |
|
6 |
<style type="text/css"> |
7 |
#textfilterholder { |
8 |
border:1px black solid; |
9 |
padding:0px; |
10 |
width:200px; |
11 |
} |
12 |
#filterholder { |
13 |
position:relative; |
14 |
} |
15 |
|
16 |
#textfilter { |
17 |
width:175px; |
18 |
font-size:12px; |
19 |
border: 0px black solid; |
20 |
height:20px; |
21 |
} |
22 |
#sel { |
23 |
width:200px; |
24 |
font-size:12px; |
25 |
} |
26 |
#dropdown { |
27 |
z-index:100; |
28 |
border: 0px black solid; |
29 |
width:200px; |
30 |
position:absolute; |
31 |
top:20px; |
32 |
left:0px; |
33 |
} |
34 |
#status { |
35 |
z-index:10; |
36 |
} |
37 |
#down { |
38 |
margin: 2px; |
39 |
background: #c0c0c0; |
40 |
border: 1px red solid; |
41 |
padding-left: 4px; |
42 |
padding-right: 4px; |
43 |
} |
44 |
</style> |
45 |
|
46 |
|
47 |
<script type="text/javascript" src="combo-test.js"></script> |
48 |
<script type="text/javascript" src="bfilter.js"></script> |
49 |
<script type="text/javascript"> |
50 |
|
51 |
var combo_active = 1; |
52 |
var combo_last_value = null; |
53 |
|
54 |
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 |
combo_active = 0; |
100 |
} |
101 |
|
102 |
return true; |
103 |
|
104 |
} |
105 |
|
106 |
// keypress in textbox |
107 |
function combo_textbox_keydown(e) { |
108 |
var d = e.keyCode; |
109 |
debug2("textbox key: "+d); |
110 |
|
111 |
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 |
function myfilter() { |
145 |
|
146 |
self.document.myfilter = new BFilter(headlines); |
147 |
|
148 |
self.document.myfilter.result = function (arr) { |
149 |
var el = self.document.myfilter.element_id('sel'); |
150 |
el.options[el.options.length] = new Option(arr[0],arr[1]); |
151 |
return true; |
152 |
} |
153 |
|
154 |
self.document.myfilter.clear_results = function () { |
155 |
var el = self.document.myfilter.element_id('sel'); |
156 |
combo_active = 0; |
157 |
el.style.display = 'none'; |
158 |
el.options.length = 0; |
159 |
el.selectedIndex = null; |
160 |
return true; |
161 |
} |
162 |
|
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 |
} |
177 |
|
178 |
function combo_filter(value) { |
179 |
|
180 |
debug2("combo filter: "+value+" ["+combo_active+"]"); |
181 |
if (! combo_active) { |
182 |
return null; |
183 |
} |
184 |
|
185 |
return self.document.myfilter.filter(value); |
186 |
} |
187 |
|
188 |
</script> |
189 |
|
190 |
|
191 |
|
192 |
|
193 |
</HEAD> |
194 |
|
195 |
<BODY onload="myfilter();"> |
196 |
|
197 |
<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 |
<div id="filterholder"> |
203 |
<div id="textfilterholder"> |
204 |
<input autocomplete="off" id="textfilter" type="text" |
205 |
onKeyDown="combo_textbox_keydown(event);" |
206 |
onKeyUp="combo_filter(this.value);" |
207 |
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 |
|
212 |
<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 |
</div> |
220 |
|
221 |
</div> |
222 |
|
223 |
<div id="status"> |
224 |
</div> |
225 |
|
226 |
<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 |
</div> |
230 |
|
231 |
|
232 |
</BODY> |
233 |
</HTML> |