下拉选项框(select)按键过滤 SUPER URGENT!

Question

大家好，我有个问题不知道如何解决，特此请教： 现有一个下拉选项框   <select> </select> ,   里面有几百个   <option> ，是各个国家的英文名称，比如   China,   Chile,   Canada等，每次选某一个国家时，都要很费劲的拉很长的列表，输入数据多时，相当耗时，并且容易出错。 现在希望有这样的解决方式： 
（1）鼠标点中下拉选项框 
（2）键盘输入按键，当输入c时，自动显示以c开头的选项，再按h时，自动显示以ch开头的选项，如此，输入chi时，基本上能定位到China或Chile等国家了。 
（3）鼠标点击下拉选项框外面的其他位置，选项即确定，并且键盘按键不再捕捉。 
（4）采用javascript方式 不知有无例子？？     望不吝赐教。 非常感谢！！！(Cant type chinese so quote someone else's topic and I got same question, solutions in that topic didnt work in IE 6.0 , anybody help me plz?)

Answer 1

没见过  试试用div模拟

Answer 2

这里有个范例 用的是Ext JavaScript框架
http://extjs.com/deploy/dev/examples/form/combos.html

Answer 3

简单的话，用框架做，貌似现在好多框架都有这个效果，EXT,JQUERY,PROTOTYPE，楼主去找找。。
要是自己写的话，比较麻烦，给楼主一个小思路。。
TextUtil.autosuggestMatch=function(sText, arrValues){
var arrResult = new Array;
var sUpper = sText.toUpperCase();
var sLower = sText.toLowerCase();

if(sText != ""){
for(var i=0; i<arrValues.length; i++){
if(arrValues[i].indexOf(sUpper) == 0
|| arrValues[i].indexOf(sLower) == 0){
arrResult.push(arrValues[i]);
}
}
}
return arrResult;
};TextUtil.autosuggest = function(oTextbox, arrValues, sListboxId){
var oListbox = document.getElementById(sListboxId);
ListUtil.clear(oListbox);
var arrMatches = TextUtil.autosuggestMatch(oTextbox.value, arrValues);

for(var i=0; i<arrMatches.length; i++){
ListUtil.add(oListbox,arrMatches[i]);
}
}var arrColors =['red','orange','yellow','green','blue','indigo','vuiket','brown','acknetworks','ab','bd','abc'];

Answer 4

参考dhCode Web开发资源包dhCode集合包含了以下部分内容：
1）dhATV，dhAjaxTreeView以及无限节点前后台实现方式；
2）dhcombobox，可输入、匹配的下拉选择框；
3）dhdatagrid，数据表格控件；
4）dhkeyboard，WEB软键盘，包含五笔、拼音、英文输入法；
5）dhLayer，提供IE及FF下都可以盖住FLASH，Select等控件的内容容器；
6）dhtabstrip，标签页控件，内置windows经典，XP及126邮箱等多种皮肤；
7）dhxmltreeview，比较早前写的一个通过加载XML文档生成的树；
8）dhadshow，广告轮显；
9）dhScroll系列，几种无缝滚动的实现；下载地址:http://download.csdn.net/source/295810