/[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 30 by dpavlin, Fri Sep 24 16:58:08 2004 UTC revision 33 by dpavlin, Sat Sep 25 22:14:22 2004 UTC
# Line 5  Line 5 
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    
 <script type="text/javascript" src="bfilter.js"></script>  
47  <script type="text/javascript" src="combo-test.js"></script>  <script type="text/javascript" src="combo-test.js"></script>
48    <script type="text/javascript" src="bfilter.js"></script>
49  <script type="text/javascript">  <script type="text/javascript">
50    
51  var combo_active = 1;  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  function combo_onKeyDown(event) {          // return to textbox and hide results on
77          //debug("event: "+event.keyCode);          // enter, backspace, left, right, esc
78          if (event.keyCode == 13) {          if (d == 13 || d == 8 || d == 37 || d == 39 || d == 27) {
79                  var el = self.document.myfilter.element_id('textfilter');                  el_textbox.focus();
80                  if (el) el.focus();                  self.document.myfilter.clear_results();
81                    
82                  el = self.document.myfilter.element_id('results');                  // ignore backspace (to prevent back in history)
83                  if (el) el.innerHTML = '';                  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;                  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() {  function myfilter() {
145    
         self.document.getElementById('textfilter').focus();  
         self.document.getElementById('textfilter').caretPos=1;  
 //      self.document.getElementById('textfilter').select();  
146          self.document.myfilter = new BFilter(headlines);          self.document.myfilter = new BFilter(headlines);
147    
148          self.document.myfilter.result = function (arr) {          self.document.myfilter.result = function (arr) {
149                  this.results_html += '<option value="'+arr[1]+'">'+                  var el = self.document.myfilter.element_id('sel');
150                          arr[0] +                  el.options[el.options.length] = new Option(arr[0],arr[1]);
                         '</option>';  
151                  return true;                  return true;
152          }          }
153    
154          // this function is called when updating innerHTML with results          self.document.myfilter.clear_results = function () {
155          self.document.myfilter.display = function () {                  var el = self.document.myfilter.element_id('sel');
156                  return '<select id="sel" size="5" onKeyDown="combo_onKeyDown(event);" onChange="self.document.getElementById(\'textfilter\').value = this.options[this.selectedIndex].text;">'+this.results_html+'</select>';                  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 combo_filter(value) {  function combo_filter(value) {
179    
180            debug2("combo filter: "+value+" ["+combo_active+"]");
181          if (! combo_active) {          if (! combo_active) {
182                  return null;                  return null;
183          }          }
# Line 87  function combo_filter(value) { Line 185  function combo_filter(value) {
185          return self.document.myfilter.filter(value);          return self.document.myfilter.filter(value);
186  }  }
187    
 function keypress(e) {  
         var d = e.keyCode;  
         if ((d == 37) || (d == 38) || (d == 39) || (d == 40)) {  
                 if (self.document.getElementById('sel'))        self.document.getElementById('sel').focus();  
         }  
   
         if (d != 13) combo_active = 1;  
 }  
   
188  </script>  </script>
189    
190    
# Line 105  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(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    
221  </div>  </div>
# Line 125  If this combobox isn't working for you, Line 228  If this combobox isn't working for you,
228  example data from first 10000 words in <tt>/usr/share/dict/words</tt>.  example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
229  </div>  </div>
230    
231    
232  </BODY>  </BODY>
233  </HTML>  </HTML>
Legend:
Removed from v.30  
changed lines
  Added in v.33
  ViewVC Help
Powered by ViewVC 1.1.26