【请教】下拉选项框(select)按键过滤和选项定位问题 ？
大家好，我有个问题不知道如何解决，特此请教：
现有一个下拉选项框 <select> </select> , 里面有几百个 <option> ，是各个国家的英文名称，比如 China, Chile, Canada等，每次选某一个国家时，都要很费劲的拉很长的列表，输入数据多时，相当耗时，并且容易出错。
现在希望有这样的解决方式：
（1）鼠标点中下拉选项框
（2）键盘输入按键，当输入c时，自动显示以c开头的选项，再按h时，自动显示以ch开头的选项，如此，输入chi时，基本上能定位到China或Chile等国家了。
（3）鼠标点击下拉选项框外面的其他位置，选项即确定，并且键盘按键不再捕捉。
（4）采用javascript方式
不知有无例子？？ 望不吝赐教。
非常感谢！！！
[解决办法]
做了个例子,大体上是这个意思,样式麻烦lz自己调下(IE测试通过):
<html>
<head>
<meta http-equiv= "Content-Type " content= "text/html; charset=gb2312 ">
<title> new page </title>
<script>
var cArray=new Array();
cArray[0]= "china ";
cArray[1]= "japan ";
cArray[2]= "canada ";
cArray[3]= "chine ";
cArray[4]= "chinaaa ";
function getC(obj){
deleteAllRow();
var str=obj.value;
for(var i=0;i <cArray.length;i++){
if(cArray[i].indexOf(str)==0){
var tr=document.createElement( "TR ");
tr.name=cArray[i];
tr.onmouseover=over(tr);
tr.onmouseout=out(tr);
tr.onclick=choose(tr);
var td=document.createElement( "TD ");
td.innerText=cArray[i];
tr.appendChild(td);
table.firstChild.appendChild(tr);
}
}
table.style.display= "block ";
}
function over(obj){
return function (){obj.style.backgroundColor= "blue ";};
}
function out(obj){
return function (){obj.style.backgroundColor= " ";};
}
function choose(obj){
return function (){txt1.value=obj.name;table.style.display= "none ";};
}
function deleteAllRow(){
var len=table.rows.length;
for(var i=len-1;i> =0;i--){
var tr=table.rows(i);
table.firstChild.removeChild(tr);
}
}
</script>
</head>
<body>
<div id=div1 style= "position:absolute;left:100px;top:100px ">
<input type=text id=txt1 style= "position:absolute;left:0px;top:0px;width:80px;height:24px " value= " " onpropertychange=getC(this)>
<div id=div2 style= "position:absolute;left:80px;top:0px;width:15px;height:20px;background-color:#cccccc "> </div>
<table id=table style= "position:absolute;left:0px;top:24px;width:95px;display:none;background-color:#cccccc "> </table>
</div>
</body>
</html>
[解决办法]
select有自动定位的功能：
按c，定位到以c开头的
再安一下c，定位到第二个以c开头的.
跟楼主的要求不一样
不过对于一个国家选择，应该足够用了
[解决办法]
晕，lz 在 css 区问了，这边咋又问了一遍
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
<h3> 首字母过滤 </h3>
<select id= "selCountry " size= "1 ">
<option value= "-1 "> please select </option>
<option value= "11 "> abc </option>
<option value= "12 "> acd </option>
<option value= "13 "> ade </option>
<option value= "21 "> bcd </option>
<option value= "22 "> bde </option>
<option value= "23 "> bef </option>
<option value= "31 "> cde </option>
<option value= "32 "> cef </option>
<option value= "33 "> cfg </option>
</select>
<script type= "text/javascript ">
<!--
var oCountry = document.getElementById( "selCountry ");
var oBackup = document.createElement( "select ");
oCountry.onkeyup = function() {
var keyText = String.fromCharCode(event.keyCode).toLowerCase();
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
// 过滤非目标选项。
for (var i=this.options.length-1; i> 0; i--)
{
if (this.options[i].text.indexOf(keyText)!=0)
{
this.options[i].selected = false;
oBackup.options.appendChild(this.removeChild(this.options[i]));
}
}
this.selectedIndex = 0;
};
oCountry.onblur = function() {
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
this.selectedIndex = 0;
};
//-->
</script>
</body>
</html>
[解决办法]
俺滴第一版有大 bug，哈
第二版完全符合需求，嘿嘿
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
<h3> 按输入字母顺序过滤，焦点离开后恢复全部选项 </h3>
<select id= "selCountry " size= "1 ">
<option value= "-1 "> please select </option>
<option value= "11 "> abc </option>
<option value= "12 "> acd </option>
<option value= "13 "> ade </option>
<option value= "21 "> bcd </option>
<option value= "22 "> bde </option>
<option value= "23 "> bef </option>
<option value= "31 "> cde </option>
<option value= "32 "> cef </option>
<option value= "33 "> cfg </option>
</select>
<script type= "text/javascript ">
<!--
var oCountry = document.getElementById( "selCountry ");
oCountry.keyText = " ";
var oBackup = document.createElement( "select ");
oCountry.onkeyup = function() {
this.keyText += String.fromCharCode(event.keyCode).toLowerCase();
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
// 过滤非目标选项。
for (var i=this.options.length-1; i> 0; i--)
{
if (this.options[i].text.indexOf(this.keyText)!=0)
{
this.options[i].selected = false;
oBackup.options.appendChild(this.removeChild(this.options[i]));
}
}
if (this.options.length==2)
this.selectedIndex = 1;
else
this.selectedIndex = 0;
};
oCountry.onblur = function() {
var originalIndex = this.selectedIndex;
this.keyText = " ";
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
this.selectedIndex = originalIndex;
//alert(this.value);
};
//-->
</script>
</body>
</html>
[解决办法]
"比如按c，列出 cde,cef,cfg ，再按d,显示 cde， 如果还有 cdf的话，按cd时显示 cde和cdf，如此。。 "
-----
如果按了c后，又想列出以d打头的，该怎么办？
不妨先弄仔细IE默认的做法，再比较自己的想法是还比他的体贴。
[解决办法]
"比如按c，列出 cde,cef,cfg ，再按d,显示 cde， 如果还有 cdf的话，按cd时显示 cde和cdf，如此。。 "
-----
理論上不符合用戶的操作習慣，一般是按C應該列出C開頭的項，按D也就顯示D開頭的項。
如果你硬要這麼實現，可以ajax讀取數據就行了，在sql語句裡like一下就出來了。
[解决办法]
呵呵，lz 说滴问题是因为俺没考虑 tab 索引滴情况，
小 bug，修整一下马上就好！
[解决办法]
再次修正 tab 索引时无任何选项滴 bug，lz 再测！！！
支持连续首字母索引，焦点离开后自动恢复全部选项！
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
<h3> 按输入字母顺序过滤，焦点离开后恢复全部选项 </h3>
<select id= "selCountry " size= "1 ">
<option value= "-1 "> please select </option>
<option value= "11 "> abc </option>
<option value= "12 "> acd </option>
<option value= "13 "> ade </option>
<option value= "21 "> bcd </option>
<option value= "22 "> bde </option>
<option value= "23 "> bef </option>
<option value= "31 "> cde </option>
<option value= "32 "> cef </option>
<option value= "33 "> cfg </option>
</select>
<script type= "text/javascript ">
<!--
var oCountry = document.getElementById( "selCountry ");
oCountry.keyText = " ";
var oBackup = document.createElement( "select ");
oCountry.onkeyup = function() {
var sKey = String.fromCharCode(event.keyCode).toLowerCase();
var rgexp = /[a-z]/;
if (rgexp.test(sKey))
{
this.keyText += sKey;
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
// 过滤非目标选项。
for (var i=this.options.length-1; i> 0; i--)
{
if (this.options[i].text.indexOf(this.keyText)!=0)
{
this.options[i].selected = false;
oBackup.options.appendChild(this.removeChild(this.options[i]));
}
}
if (this.options.length==2)
this.selectedIndex = 1;
else
this.selectedIndex = 0;
}
};
oCountry.onblur = function() {
var originalIndex = this.selectedIndex;
this.keyText = " ";
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
this.selectedIndex = originalIndex;
//alert(this.value);
};
//-->
</script>
</body>
</html>
[解决办法]
另外，只有ie6不支持连续按键
ie7和firefox都已经支持，连续按键ba，就会定位到ba打头的选项，
跟window文档管理器里的定位file/folder的功能一样.
[解决办法]
<script type= "text/javascript ">
//支持中文
var currentIndex = 0;
var currentChar = ' ';
function CharPointItem(ddl)
{
var itemCount = ddl.options.length;
var selectStr = ' ';
var laseIndex = currentIndex;
var pressKey = String.fromCharCode(window.event.keyCode);
if(itemCount <=1 || IsChar(pressKey)== false)
return;
if(pressKey != currentChar)
currentIndex = 0;
for(var i =currentIndex;i <itemCount;i++)
{
if(getpy(ddl.options[i].text.charAt(0))== pressKey)
{
currentChar = pressKey;
ddl.selectedIndex = i;
currentIndex = i + 1;
break;
}
}
currentIndex = laseIndex == currentIndex?0:currentIndex;
}
function IsChar(str)
{
t = str.charAt(0).toLowerCase();
if(t <= "z " && t > = "a ")
return true;
else
return false;
}
</script>
<script type= "text/vbscript ">
<!--
function getpychar(char)
tmp=65536+asc(char)
if(tmp> =45217 and tmp <=45252) then
getpychar= "A "
elseif(tmp> =45253 and tmp <=45760) then
getpychar= "B "
elseif(tmp> =45761 and tmp <=46317) then
getpychar= "C "
elseif(tmp> =46318 and tmp <=46825) then
getpychar= "D "
elseif(tmp> =46826 and tmp <=47009) then
getpychar= "E "
elseif(tmp> =47010 and tmp <=47296) then
getpychar= "F "
elseif(tmp> =47297 and tmp <=47613) then
getpychar= "G "
elseif(tmp> =47614 and tmp <=48118) then
getpychar= "H "
elseif(tmp> =48119 and tmp <=49061) then
getpychar= "J "
elseif(tmp> =49062 and tmp <=49323) then
getpychar= "K "
elseif(tmp> =49324 and tmp <=49895) then
getpychar= "L "
elseif(tmp> =49896 and tmp <=50370) then
getpychar= "M "
elseif(tmp> =50371 and tmp <=50613) then
getpychar= "N "
elseif(tmp> =50614 and tmp <=50621) then
getpychar= "O "
elseif(tmp> =50622 and tmp <=50905) then
getpychar= "P "
elseif(tmp> =50906 and tmp <=51386) then
getpychar= "Q "
elseif(tmp> =51387 and tmp <=51445) then
getpychar= "R "
elseif(tmp> =51446 and tmp <=52217) then
getpychar= "S "
elseif(tmp> =52218 and tmp <=52697) then
getpychar= "T "
elseif(tmp> =52698 and tmp <=52979) then
getpychar= "W "
elseif(tmp> =52980 and tmp <=53640) then
getpychar= "X "
elseif(tmp> =53689 and tmp <=54480) then
getpychar= "Y "
elseif(tmp> =54481 and tmp <=62289) then
getpychar= "Z "
else '如果不是中文，则不处理
getpychar=char
end if
end function
function getpy(str)
for i=1 to len(str)
getpy=getpy&getpychar(mid(str,i,1))
next
end function
//-->
</script>
<select id= "ddlItem " onKeyDown= "CharPointItem(this); " size= "1 ">
<option value= "-1 "> please select </option>
<option value= "11 "> 一 </option>
<option value= "12 "> 二 </option>
<option value= "13 "> 三 </option>
<option value= "21 "> 四 </option>
<option value= "22 "> 五 </option>
<option value= "23 "> 六 </option>
<option value= "31 "> 七 </option>
<option value= "32 "> 八 </option>
<option value= "33 "> 九 </option>
<option value= "34 "> asd </option>
<option value= "35 "> sfdg </option>
<option value= "36 "> dgf </option>
<option value= "37 "> fqwe </option>
</select>
[解决办法]
第三次修正：
1 修正 ie 6 下脚本设置错误；
2 增加 Reset 按钮；
3 添加无效输入回滚功能，避免下拉框无选项滴状况出现。
L@_@K
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml ">
<head>
<title> dhtml.selectAndOptions.filterByKeyCode.html </title>
<meta name= "generator " content= "editplus " />
<meta name= "author " content= "yixianggao@126.com " />
<meta name= "keywords " content= "javascript " />
<meta name= "description " content= "for javascript region of csdn " />
</head>
<body>
<h3> 按输入字母顺序过滤，焦点离开后恢复全部选项 </h3>
<select id= "selCountry " size= "1 ">
<option value= "-1 "> please select </option>
<option value= "11 "> abc </option>
<option value= "12 "> acd </option>
<option value= "13 "> ade </option>
<option value= "21 "> bcd </option>
<option value= "22 "> bde </option>
<option value= "23 "> bef </option>
<option value= "31 "> cde </option>
<option value= "32 "> cef </option>
<option value= "33 "> cfg </option>
</select>
<input type= "button " id= "btnRest " value= "Reset " />
<script type= "text/javascript ">
<!--
var oCountry = document.getElementById( "selCountry ");
oCountry.keyText = " ";
var oReset = document.getElementById( "btnRest ");
var oBackup = document.createElement( "select ");
oCountry.onkeyup = function() {
var sKey = String.fromCharCode(event.keyCode).toLowerCase();
var rgexp = /[a-z]/;
if (rgexp.test(sKey))
{
this.keyText += sKey;
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
// 过滤非目标选项。
for (var i=this.options.length-1; i> 0; i--)
{
if (this.options[i].text.indexOf(this.keyText)!=0)
{
oBackup.options.appendChild(this.removeChild(this.options[i]));
}
}
if (this.options.length==2)
{
this.selectedIndex = 1;
}
else if (this.options.length > 2)
{
this.selectedIndex = 0;
}
else if (this.options.length==1)
{
// 检索结果为空，实施回滚！
this.keyText = this.keyText.substr(0, this.keyText.length-1);
// 恢复刚刚删除的选项。
for (var i=oBackup.options.length-1; i> -1; i--)
{
if (oBackup.options[i].text.indexOf(this.keyText)==0)
{
this.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
}
this.selectedIndex = 0;
}
}
};
oCountry.onblur = function() {
var originalIndex = this.selectedIndex;
this.keyText = " ";
// 恢复全部选项。
for (var i=oBackup.options.length-1; i> =0; i--)
{
oCountry.options.appendChild(oBackup.removeChild(oBackup.options[i]));
}
this.selectedIndex = originalIndex;
//alert(this.value);
};
oReset.onclick = function() {
oCountry.selectedIndex = 0;
};
//-->
</script>
</body>
</html>
[解决办法]
"晕，大家怎么自己吵起来，哈 "
----
为什么说“吵起来了”，没看出
捋须而笑
[解决办法]
你的代码，在ie6下看不出跟以下代码功能上有什么区别啊.
IE6的select本来就支持汉字的.
你的代码是不是为IE5以前的版本写的？
--------------------------------------
IE6不支持中文啊....我刚测试过.
[解决办法]
我的机器：
IE6.0.2800.1100
输入法是：王码五笔86版
[解决办法]
不过IE6它支持得不够，足码的字(按四个键，最后一个键不是空白键的,例如ugdu,不就能定位到“美国”)会无法定位
[解决办法]
难道它支持5笔不支持拼音?
我不会5笔...
