/[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

Diff of /trunk/combo.html

Parent Directory Parent Directory | Revision Log Revision Log | View Patch Patch

revision 11 by dpavlin, Fri Sep 10 12:42:58 2004 UTC revision 34 by dpavlin, Sun Sep 26 22:10:44 2004 UTC
# Line 1  Line 1 
1  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2  <HTML>  <HTML>
3  <HEAD>  <HEAD>
4  <TITLE> New Document </TITLE>  <TITLE>Combobox example</TITLE>
5    
6  <style type="text/css">  <style type="text/css">
7  #textfilterholder {  #textfilterholder {
8          border:1px black solid          border:1px black solid;
9          padding:0px;          padding:0px;
10          width:200px;          width:200px;
11  }  }
# Line 16  Line 16 
16  #textfilter {  #textfilter {
17          width:175px;          width:175px;
18          font-size:12px;          font-size:12px;
19          border: 0px black solid          border: 0px black solid;
20          height:20px;          height:20px;
21  }  }
22  #sel {  #sel {
23          width:200px;          width:200px;
24          font-size:12px;          font-size:12px;
25  }  }
26  #results {  #dropdown {
27          z-index:100;          z-index:100;
28          border: 0px black solid;          border: 0px black solid;
29          width:200px;;          width:200px;
30          position:absolute;          position:absolute;
31          top:20px;          top:20px;
32          left:0px;          left:0px;
# Line 34  Line 34 
34  #status {  #status {
35  z-index:10;  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>  </style>
45    
46    
47    <script type="text/javascript" src="combo-test.js"></script>
48  <script type="text/javascript" src="bfilter.js"></script>  <script type="text/javascript" src="bfilter.js"></script>
49  <script type="text/javascript">  <script type="text/javascript">
50    
51  var headlines = new Object();  var combo_active = 1;
52  headlines['ad'] = [  var combo_last_value = null;
   ['thes/232.html','adacta']  
 , ['thes/232.html','added']  
 , ['thes/232.html','addenda']  
 , ['thes/232.html','adlib']  
 ];  
53    
54  headlines.min_len = 2;  var debug2_lines = 0;
 headlines.length = 4;  
55    
56  function myfilter() {  function debug2(text) {
57          document.getElementById('textfilter').focus();          var el = self.document.myfilter.element_id('debug2');
58  document.getElementById('textfilter').caretPos=1;          debug2_lines++;
59  //      document.getElementById('textfilter').select();          if (debug2_lines > 10) {
60          document.myfilter = new BFilter(headlines);                  el.innerHTML = "...<br>";
61                            debug2_lines = 0;
62          document.myfilter.html_pre = '<option value="';          }
63          document.myfilter.html_mid = '">';          if (el) el.innerHTML += debug2_lines+": "+text+"<br>";
64          document.myfilter.html_post = '</option>';          return true;
         document.myfilter.html_full_pre = '<select id="sel" size="5" onkeydown="if (event.keyCode==13) document.getElementById(\'textfilter\').focus();" onchange="document.getElementById(\'textfilter\').value = this.options[this.selectedIndex].text;">';  
         document.myfilter.html_full_post = '</select>';  
65  }  }
66    
67  function keypress(e) {  // 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;          var d = e.keyCode;
109          if ((d == 37) || (d == 38) || (d == 39) || (d == 40)) {          debug2("textbox key: "+d);
110                  if (document.getElementById('sel'))     document.getElementById('sel').focus();  
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>  </script>
# Line 80  function keypress(e) { Line 194  function keypress(e) {
194    
195  <BODY onload="myfilter();">  <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">  <div id="filterholder">
203  <div id="textfilterholder"><input autocomplete="off" id="textfilter" name="textfilter" type="text" onkeyup="document.myfilter.filter(document, this.value, headlines);" onKeyDown="keypress(event);" value=""></div>  <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="results">  <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>  </div>
220    
 <div id="status">  
221  </div>  </div>
222    
223    <div id="status">
224  </div>  </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    
 Text  
231    
232  </BODY>  </BODY>
233  </HTML>  </HTML>
Legend:
Removed from v.11  
changed lines
  Added in v.34
  ViewVC Help
Powered by ViewVC 1.1.26