/[bfilter]/trunk/combo.html
This is repository of my old source code which isn't updated any more. Go to git.rot13.org for current projects!
ViewVC logotype

Contents of /trunk/combo.html

Parent Directory Parent Directory | Revision Log Revision Log


Revision 34 - (show annotations)
Sun Sep 26 22:10:44 2004 UTC (14 years, 10 months ago) by dpavlin
File MIME type: text/html
File size: 5160 byte(s)
hide dropdown first, and then empty it (prevents flicker in Internet
Explorer)

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>

  ViewVC Help
Powered by ViewVC 1.1.26