【请教】下拉选项框(select)按键过滤和选项定位问题？

做了个例子,大体上是这个意思,样式麻烦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>

解决方案 »

免费领取超大流量手机卡，每月29元包185G流量+100分钟通话, 中国电信官方发货

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="[email protected]" />
  <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">

</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="[email protected]" />
  <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">

</script>
</body>
</html>
多谢楼上！我试了一下，当按c时（匹配结果多个），没有显示列表。能否让它列出c开头的选项？不然的话用户会感觉这个功能有问题的，也不知道他能否匹配到结果。还是列出来比较友好。比如按c，列出 cde,cef,cfg ，再按d,显示 cde，如果还有 cdf的话，按cd时显示 cde和cdf，如此。。非常感谢！望再考虑一下我的想法。。
"比如按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="[email protected]" />
  <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">

</script>
</body>
</html>
To jackyzgm() 我试了一下，当按c时（匹配结果多个），没有显示列表。能否让它列出c开头的选项？不然的话用户会感觉这个功能有问题的，也不知道他能否匹配到结果。还是列出来比较友好。
====
这是因为 tab 索引所致滴 bug，以修正！比如按c，列出 cde,cef,cfg ，再按d,显示 cde，如果还有 cdf的话，按cd时显示 cde和cdf，如此。。
====
很明显，lz 没有仔细阅读俺滴代码！俺滴第一个修正版中滴算法已经实现了！非常感谢！望再考虑一下我的想法。。
====
请仔细阅读俺滴代码，然后 sf，哈
另外，只有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">

</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>
Good_Net(花生鱼) :
-----
你的代码，在ie6下看不出跟以下代码功能上有什么区别啊.
IE6的select本来就支持汉字的.
你的代码是不是为IE5以前的版本写的？
<select id="ddlItem" onKeyDownddddd="doNothing();"   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>
晕，大家怎么自己吵起来，哈lz 哪里去了，还有啥问题呀？！不过俺刚刚在 ie 6 下测试了一下，
发现了一些小问题，稍后贴出第三修正版！
第三次修正：
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="[email protected]" />
  <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">

</script>
</body>
</html>
你的代码，在ie6下看不出跟以下代码功能上有什么区别啊.
IE6的select本来就支持汉字的.
你的代码是不是为IE5以前的版本写的？--------------------------------------
IE6不支持中文啊....我刚测试过.
不过IE6它支持得不够，足码的字(按四个键，最后一个键不是空白键的,例如ugdu,不就能定位到“美国”)会无法定位

【请教】下拉选项框(select)按键过滤和选项定位问题 ？

解决方案 »

【请教】下拉选项框(select)按键过滤和选项定位问题？