bfilter/trunk/combo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE>Combobox example</TITLE>

<style type="text/css">
#textfilterholder {
        border:1px black solid
        padding:0px;
        width:200px;
}
#filterholder {
        position:relative;
}

#textfilter {
        width:175px;
        font-size:12px;
        border: 0px black solid
        height:20px;
}
#sel {
        width:200px;
        font-size:12px;
}
#results {
        z-index:100;
        border: 0px black solid;
        width:200px;;
        position:absolute;
        top:20px;
        left:0px;
}
#status {
z-index:10;
}
</style>


<script type="text/javascript" src="bfilter.js"></script>
<script type="text/javascript" src="combo-test.js"></script>
<script type="text/javascript">

var combo_active = 1;

function combo_onKeyDown(event) {
        //debug("event: "+event.keyCode);
        if (event.keyCode == 13) {
                var el = self.document.myfilter.element_id('textfilter');
                if (el) el.focus();
                
                el = self.document.myfilter.element_id('results');
                if (el) el.innerHTML = '';
        
                combo_active = 0;
        }

}


function myfilter() {

        self.document.getElementById('textfilter').focus();
        self.document.getElementById('textfilter').caretPos=1;
//      self.document.getElementById('textfilter').select();
        self.document.myfilter = new BFilter(headlines);

        self.document.myfilter.result = function (arr) {
                this.results_html += '<option value="'+arr[1]+'">'+
                        arr[0] +
                        '</option>';
                return true;
        }

        // this function is called when updating innerHTML with results
        self.document.myfilter.display = function () {
                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>';
        }
}

function combo_filter(value) {

        if (! combo_active) {
                return null;
        }

        return self.document.myfilter.filter(value);
}

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;
}

</script>


</HEAD>

<BODY onload="myfilter();">

<div id="filterholder">
<div id="textfilterholder">
<input autocomplete="off" id="textfilter" name="textfilter" type="text"
 onKeyDown="keypress(event);"
 onKeyUp="combo_filter(this.value);"
value=""></div>

<div id="results">
</div>

</div>

<div id="status">
</div>

<div style="color: #a0a0a0">
If this combobox isn't working for you, try running <tt>make combo</tt> to create
example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
</div>

</BODY>
</HTML>
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	#results {
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	</style>
38
39
40	<script type="text/javascript" src="bfilter.js"></script>
41	<script type="text/javascript" src="combo-test.js"></script>
42	<script type="text/javascript">
43
44	var combo_active = 1;
45
46	function combo_onKeyDown(event) {
47	//debug("event: "+event.keyCode);
48	if (event.keyCode == 13) {
49	var el = self.document.myfilter.element_id('textfilter');
50	if (el) el.focus();
51
52	el = self.document.myfilter.element_id('results');
53	if (el) el.innerHTML = '';
54
55	combo_active = 0;
56	}
57
58	}
59
60
61	function myfilter() {
62
63	self.document.getElementById('textfilter').focus();
64	self.document.getElementById('textfilter').caretPos=1;
65	// self.document.getElementById('textfilter').select();
66	self.document.myfilter = new BFilter(headlines);
67
68	self.document.myfilter.result = function (arr) {
69	this.results_html += '<option value="'+arr[1]+'">'+
70	arr[0] +
71	'</option>';
72	return true;
73	}
74
75	// this function is called when updating innerHTML with results
76	self.document.myfilter.display = function () {
77	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>';
78	}
79	}
80
81	function combo_filter(value) {
82
83	if (! combo_active) {
84	return null;
85	}
86
87	return self.document.myfilter.filter(value);
88	}
89
90	function keypress(e) {
91	var d = e.keyCode;
92	if ((d == 37) \|\| (d == 38) \|\| (d == 39) \|\| (d == 40)) {
93	if (self.document.getElementById('sel')) self.document.getElementById('sel').focus();
94	}
95
96	if (d != 13) combo_active = 1;
97	}
98
99	</script>
100
101
102
103
104	</HEAD>
105
106	<BODY onload="myfilter();">
107
108	<div id="filterholder">
109	<div id="textfilterholder">
110	<input autocomplete="off" id="textfilter" name="textfilter" type="text"
111	onKeyDown="keypress(event);"
112	onKeyUp="combo_filter(this.value);"
113	value=""></div>
114
115	<div id="results">
116	</div>
117
118	</div>
119
120	<div id="status">
121	</div>
122
123	<div style="color: #a0a0a0">
124	If this combobox isn't working for you, try running <tt>make combo</tt> to create
125	example data from first 10000 words in <tt>/usr/share/dict/words</tt>.
126	</div>
127
128	</BODY>
129	</HTML>