bfilter/trunk/combo.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </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">

var headlines = new Object();
headlines['ad'] = [
  ['thes/232.html','adacta']
, ['thes/232.html','added']
, ['thes/232.html','addenda']
, ['thes/232.html','adlib']
];

headlines.min_len = 2;
headlines.length = 4;

var combo_active = 1;

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

}


function myfilter() {

        document.getElementById('textfilter').focus();
document.getElementById('textfilter').caretPos=1;
//      document.getElementById('textfilter').select();
        document.myfilter = new BFilter(headlines);
        
        document.myfilter.html_pre = '<option value="';
        document.myfilter.html_mid = '">';
        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>';
}

function combo_filter(document,value) {

        if (! combo_active) {
                return;
        }

        return document.myfilter.filter(document, value, headlines);
}

function keypress(e) {
        var d = e.keyCode;
        if ((d == 37) || (d == 38) || (d == 39) || (d == 40)) {
                if (document.getElementById('sel'))     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(document, this.value);"
value=""></div>

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

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

</div>


Text

</BODY>
</HTML>
1	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
2	<HTML>
3	<HEAD>
4	<TITLE> New Document </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">
42
43	var headlines = new Object();
44	headlines['ad'] = [
45	['thes/232.html','adacta']
46	, ['thes/232.html','added']
47	, ['thes/232.html','addenda']
48	, ['thes/232.html','adlib']
49	];
50
51	headlines.min_len = 2;
52	headlines.length = 4;
53
54	var combo_active = 1;
55
56	function combo_onKeyDown(event) {
57	//debug("event: "+event.keyCode);
58	if (event.keyCode == 13) {
59	var el = document.myfilter.element_id('textfilter');
60	if (el) el.focus();
61
62	el = document.myfilter.element_id('results');
63	if (el) el.innerHTML = '';
64
65	combo_active = 0;
66	}
67
68	}
69
70
71	function myfilter() {
72
73	document.getElementById('textfilter').focus();
74	document.getElementById('textfilter').caretPos=1;
75	// document.getElementById('textfilter').select();
76	document.myfilter = new BFilter(headlines);
77
78	document.myfilter.html_pre = '<option value="';
79	document.myfilter.html_mid = '">';
80	document.myfilter.html_post = '</option>';
81	document.myfilter.html_full_pre = '<select id="sel" size="5" onKeyDown="combo_onKeyDown(event);" onChange="document.getElementById(\'textfilter\').value = this.options[this.selectedIndex].text;">';
82	document.myfilter.html_full_post = '</select>';
83	}
84
85	function combo_filter(document,value) {
86
87	if (! combo_active) {
88	return;
89	}
90
91	return document.myfilter.filter(document, value, headlines);
92	}
93
94	function keypress(e) {
95	var d = e.keyCode;
96	if ((d == 37) \|\| (d == 38) \|\| (d == 39) \|\| (d == 40)) {
97	if (document.getElementById('sel')) document.getElementById('sel').focus();
98	}
99
100	if (d != 13) combo_active = 1;
101	}
102
103	</script>
104
105
106
107
108	</HEAD>
109
110	<BODY onload="myfilter();">
111
112	<div id="filterholder">
113	<div id="textfilterholder">
114	<input autocomplete="off" id="textfilter" name="textfilter" type="text"
115	onKeyDown="keypress(event);"
116	onKeyUp="combo_filter(document, this.value);"
117	value=""></div>
118
119	<div id="results">
120	</div>
121
122	<div id="status">
123	</div>
124
125	</div>
126
127
128	Text
129
130	</BODY>
131	</HTML>