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 = 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>

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