/[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 23 by dpavlin, Tue Sep 14 22:43:16 2004 UTC revision 33 by dpavlin, Sat Sep 25 22:14:22 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  var combo_active = 1;  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  function combo_onKeyDown(event) {                  if (d == 27) {
86          //debug("event: "+event.keyCode);                          el_textbox.value = combo_last_value;
87          if (event.keyCode == 13) {                  }
88                  var el = document.myfilter.element_id('textfilter');  
89                  if (el) el.focus();          }
90                    
91                  el = document.myfilter.element_id('results');          // up or down on first/last element?
92                  if (el) el.innerHTML = '';          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;                  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  function myfilter() {          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          document.getElementById('textfilter').focus();          // left, right -- hide dropdown
135  document.getElementById('textfilter').caretPos=1;          if (d == 37 || d == 39) {
136  //      document.getElementById('textfilter').select();                  self.document.myfilter.clear_results();
137          document.myfilter = new BFilter(headlines);                  return false;
138                    }
139          document.myfilter.html_pre = '<option value="';  
140          document.myfilter.html_mid = '">';          return true;
         document.myfilter.html_post = '</option>';  
         document.myfilter.html_full_pre = '<select id="sel" size="5" onKeyDown="combo_onKeyDown(event);" onChange="document.getElementById(\'textfilter\').value = this.options[this.selectedIndex].text;">';  
         document.myfilter.html_full_post = '</select>';  
141  }  }
142    
 function combo_filter(document,value) {  
143    
144          if (! combo_active) {  function myfilter() {
145                  return;  
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          return document.myfilter.filter(document, value, headlines);          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            }
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 keypress(e) {  function combo_filter(value) {
179          var d = e.keyCode;  
180          if ((d == 37) || (d == 38) || (d == 39) || (d == 40)) {          debug2("combo filter: "+value+" ["+combo_active+"]");
181                  if (document.getElementById('sel'))     document.getElementById('sel').focus();          if (! combo_active) {
182                    return null;
183          }          }
184    
185          if (d != 13) combo_active = 1;          return self.document.myfilter.filter(value);
186  }  }
187    
188  </script>  </script>
# Line 109  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">  <div id="textfilterholder">
204  <input autocomplete="off" id="textfilter" name="textfilter" type="text"  <input autocomplete="off" id="textfilter" type="text"
205   onKeyDown="keypress(event);"   onKeyDown="combo_textbox_keydown(event);"
206   onKeyUp="combo_filter(document, this.value);"   onKeyUp="combo_filter(this.value);"
207  value=""></div>   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.23  
changed lines
  Added in v.33
  ViewVC Help
Powered by ViewVC 1.1.26