根据键入字母自动匹配DropDownList中选项的拼音首字母

<! 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 ></ title >
   < meta  http-equiv =Content-Type  content ="text/html;charset=UTF-8" >
   < meta  name ="generator"  content ="editplus"   />
  </ head >
  < body >   
< script  type ="text/vbscript" >
function   getpychar(char)   
  tmp=65536+asc(char)   
  if(tmp>=45217   and   tmp<=45252)   then   getpychar=   "A"   
  if(tmp>=45253   and   tmp<=45760)   then   getpychar=   "B"   
  if(tmp>=45761   and   tmp<=46317)   then   getpychar=   "C"   
  if(tmp>=46318   and   tmp<=46825)   then   getpychar=   "D"   
  if(tmp>=46826   and   tmp<=47009)   then   getpychar=   "E"   
  if(tmp>=47010   and   tmp<=47296)   then   getpychar=   "F"   
  if(tmp>=47297   and   tmp<=47613)   then   getpychar=   "G"   
  if(tmp>=47614   and   tmp<=48118)   then   getpychar=   "H"   
  if(tmp>=48119   and   tmp<=49061)   then   getpychar=   "J"   
  if(tmp>=49062   and   tmp<=49323)   then   getpychar=   "K"   
  if(tmp>=49324   and   tmp<=49895)   then   getpychar=   "L"   
  if(tmp>=49896   and   tmp<=50370)   then   getpychar=   "M"   
  if(tmp>=50371   and   tmp<=50613)   then   getpychar=   "N"   
  if(tmp>=50614   and   tmp<=50621)   then   getpychar=   "O"   
  if(tmp>=50622   and   tmp<=50905)   then   getpychar=   "P"   
  if(tmp>=50906   and   tmp<=51386)   then   getpychar=   "Q"   
  if(tmp>=51387   and   tmp<=51445)   then   getpychar=   "R"   
  if(tmp>=51446   and   tmp<=52217)   then   getpychar=   "S"   
  if(tmp>=52218   and   tmp<=52697)   then   getpychar=   "T"   
  if(tmp>=52698   and   tmp<=52979)   then   getpychar=   "W"   
  if(tmp>=52980   and   tmp<=53640)   then   getpychar=   "X"   
  if(tmp>=53689   and   tmp<=54480)   then   getpychar=   "Y"   
  if(tmp>=54481   and   tmp<=55289)   then   getpychar=   "Z"   
  end   function       
  function   getpy(str)  
  Dim i
  For i=1   to   len(str)   
  getpy=getpy&getpychar(mid(str,i,1))   
  next   
  end   function   
</ script >    
< script  type ="text/javascript" >
<!--
//Author: Don.cnblogs.com 
//QQ:83458106
var FilterDDL = function (ddlElement) {
    this.selectIndex=0;
    this.ddl=ddlElement;        this.letters=["A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z"];
    //初始化
    this.init=function(){        
        for(i=0;i<this.ddl.options.length;i++)
        {
            var optionText =this.ddl.options[i].innerText;
            var py= getpy(optionText.length>0 ? optionText.substring(0,1):"");
            if(!py)py="";
            this.ddl.options[i].py= py;
        }
        this.ddl.onkeydown=this.keydown;
    };
    //接收按键事件
    this.keydown=function(){            
        var object = arguments.callee.object;
        var changed=false;
        if(event.keyCode<=90 && event.keyCode>=65) //键入字母
        {    
            var keyLetter = object.letters[event.keyCode-65];
            var startIndex= keyLetter == object.ddl.options[object.ddl.selectedIndex].py ? object.ddl.selectedIndex+1 : 0; //找到开始位置
            for(i=0;i<object.ddl.options.length;i++)  //遍历options
            {
                var index=i+startIndex; //当前偏移量
                if(index>=object.ddl.options.length) //如果超过总长度
                    index=index-object.ddl.options.length; //从头开始
                if(object.ddl.options[index].py == keyLetter)
                {    
                    object.ddl.options[index].selected=true;
                    break;
                }
            }
        }        
    };
    this.keydown.object = this;
}
//-->
</ script >< br  />
< select  id ="ddlCity"   >
< option  value ="" ></ option >
< option  value ="" > 北京 </ option >< option  value ="" > 天津 </ option >< option  value ="" > 上海 </ option >< option  value ="" > 重庆 </ option >< option  value ="" > 石家庄市 </ option >< option  value ="" > 唐山市 </ option >< option  value ="" > 秦皇岛市 </ option >< option  value ="" > 邯郸市 </ option >< option  value ="" > 邢台市 </ option >< option  value ="" > 保定市 </ option >< option  value ="" > 张家口市 </ option >< option  value ="" > 承德市 </ option >< option  value ="" > 廊坊市 </ option >< option  value ="" > 衡水市 </ option >< option  value ="" > 沧州市 </ option >< option  value ="" > 沈阳市 </ option >< option  value ="" > 大连市 </ option >< option  value ="" > 鞍山市 </ option >< option  value ="" > 抚顺市 </ option >< option  value ="" > 本溪市 </ option >< option  value ="" > 丹东市 </ option >< option  value ="" > 锦州市 </ option >< option  value ="" > 葫芦岛市 </ option >< option  value ="" > 营口市 </ option >< option  value ="" > 盘锦市 </ option >< option  value ="" > 阜新市 </ option >< option  value ="" > 辽阳市 </ option >< option  value ="" > 铁岭市 </ option >< option  value ="" > 朝阳市 </ option >< option  value ="" > 哈尔滨市 </ option >< option  value ="" > 齐齐哈尔市 </ option >< option  value ="" > 鹤岗市 </ option >< option  value ="" > 双鸭山市 </ option >< option  value ="" > 鸡西市 </ option >< option  value ="" > 大庆市 </ option >< option  value ="" > 伊春市 </ option >< option  value ="" > 牡丹江市 </ option >< option  value ="" > 佳木斯市 </ option >< option  value ="" > 七台河市 </ option >< option  value ="" > 黑河市 </ option >< option  value ="" > 绥化市 </ option >< option  value ="" > 大兴安岭地区 </ option >< option  value ="" > 长春市 </ option >< option  value ="" > 吉林市 </ option >< option  value ="" > 四平市 </ option >< option  value ="" > 辽源市 </ option >< option  value ="" > 通化市 </ option >< option  value ="" > 白山市 </ option >< option  value ="" > 延边州 </ option >< option  value ="" > 白城市 </ option >< option  value ="" > 松原市 </ option >< option  value ="" > 济南市青岛市 </ option >< option  value ="" > 淄博市 </ option >< option  value ="" > 枣庄市 </ option >< option  value ="" > 东营市 </ option >< option  value ="" > 潍坊市 </ option >< option  value ="" > 烟台市 </ option >< option  value ="" > 威海市 </ option >< option  value ="" > 济宁市 </ option >< option  value ="" > 泰安市 </ option >< option  value ="" > 日照市 </ option >< option  value ="" > 莱芜市 </ option >< option  value ="" > 临沂市 </ option >< option  value ="" > 德州市 </ option >< option  value ="" > 太原市 </ option >< option  value ="" > 大同市 </ option >< option  value ="" > 阳泉市 </ option >< option  value ="" > 长治市 </ option >< option  value ="" > 晋城市 </ option >< option  value ="" > 朔州市 </ option >< option  value ="" > 晋中市 </ option >< option  value ="" > 运城市 </ option >< option  value ="" > 忻州市 </ option >< option  value ="" > 临汾市 </ option >< option  value ="" > 吕梁地区 </ option >< option  value ="" > 合肥市 </ option >< option  value ="" > 芜湖市 </ option >< option  value ="" > 蚌埠市 </ option >< option  value ="" > 淮南市 </ option >< option  value ="" > 马鞍山市 </ option >< option  value ="" > 淮北市 </ option >< option  value ="" > 铜陵市 </ option >< option  value ="" > 安庆市 </ option >< option  value ="" > 黄山市 </ option >< option  value ="" > 滁州市 </ option >< option  value ="" > 阜阳市 </ option >< option  value ="" > 宿州市 </ option >< option  value ="" > 巢湖市 </ option >< option  value ="" > 六安市 </ option >< option  value ="" > 亳州市 </ option >< option  value ="" > 池州市 </ option >< option  value ="" > 宣城市 </ option >< option  value ="" > 杭州市 </ option >< option  value ="" > 宁波市 </ option >< option  value ="" > 温州市 </ option >< option  value ="" > 嘉兴市 </ option >< option  value ="" > 湖州市 </ option >< option  value ="" > 绍兴市 </ option >< option  value ="" > 金华市 </ option >< option  value ="" > 衢州市 </ option >< option  value ="" > 舟山市 </ option >< option  value ="" > 台州市 </ option >< option  value ="" > 丽水市 </ option >< option  value ="" > 南京市 </ option >< option  value ="" > 徐州市 </ option >< option  value ="" > 连云港市 </ option >< option  value ="" > 淮安市 </ option >< option  value ="" > 宿迁市 </ option >< option  value ="" > 盐城市 </ option >< option  value ="" > 扬州市 </ option >< option  value ="" > 泰州市 </ option >< option  value ="" > 南通市 </ option >< option  value ="" > 镇江市 </ option >< option  value ="" > 常州市 </ option >< option  value ="" > 无锡市 </ option >< option  value ="" > 苏州市 </ option >< option  value ="" > 南昌市 </ option >< option  value ="" > 景德镇市 </ option >< option  value ="" > 萍乡市 </ option >< option  value ="" > 九江市 </ option >< option  value ="" > 新余市 </ option >< option  value ="" > 鹰潭市 </ option >< option  value ="" > 赣州市 </ option >< option  value ="" > 吉安市 </ option >< option  value ="" > 宜春市 </ option >< option  value ="" > 抚州市 </ option >< option  value ="" > 上饶市 </ option >< option  value ="" > 广州市 </ option >< option  value ="" > 深圳市 </ option >< option  value ="" > 珠海市 </ option >< option  value ="" > 汕头市 </ option >< option  value ="" > 韶关市 </ option >< option  value ="" > 惠州市 </ option >< option  value ="" > 河源市 </ option >< option  value ="" > 梅州市 </ option >< option  value ="" > 汕尾市 </ option >< option  value ="" > 东莞市 </ option >< option  value ="" > 中山市 </ option >< option  value ="" > 江门市 </ option >< option  value ="" > 佛山市 </ option >< option  value ="" > 阳江市 </ option >< option  value ="" > 湛江市 </ option >< option  value ="" > 茂名市 </ option >< option  value ="" > 肇庆市 </ option >< option  value ="" > 清远市 </ option >< option  value ="" > 潮州市 </ option >< option  value ="" > 揭阳市 </ option >< option  value ="" > 云浮市 </ option >< option  value ="" > 福州市 </ option >< option  value ="" > 厦门市 </ option >< option  value ="" > 三明市 </ option >< option  value ="" > 莆田市 </ option >< option  value ="" > 泉州市 </ option >< option  value ="" > 漳州市 </ option >< option  value ="" > 南平市 </ option >< option  value ="" > 龙岩市 </ option >< option  value ="" > 宁德市 </ option >< option  value ="" > 海口市 </ option >< option  value ="" > 三亚市 </ option >< option  value ="" > 琼山市 </ option >< option  value ="" > 文昌市 </ option >< option  value ="" > 琼海市 </ option >< option  value ="" > 万宁市 </ option >< option  value ="" > 五指山市 </ option >< option  value ="" > 东方市 </ option >< option  value ="" > 儋州市 </ option >< option  value ="" > 临高县 </ option >< option  value ="" > 澄迈县 </ option >< option  value ="" > 定安县 </ option >< option  value ="" > 屯昌县 </ option >< option  value ="" > 昌江县 </ option >< option  value ="" > 白沙县 </ option >< option  value ="" > 琼中县 </ option >< option  value ="" > 陵水县 </ option >< option  value ="" > 保亭县 </ option >< option  value ="" > 乐东县 </ option >< option  value ="" > 郑州市 </ option >< option  value ="" > 开封市 </ option >< option  value ="" > 洛阳市 </ option >< option  value ="" > 平顶山市 </ option >< option  value ="" > 焦作市 </ option >< option  value ="" > 鹤壁市 </ option >< option  value ="" > 新乡市 </ option >< option  value ="" > 安阳市 </ option >< option  value ="" > 濮阳市 </ option >< option  value ="" > 许昌市 </ option >< option  value ="" > 漯河市 </ option >< option  value ="" > 三门峡市 </ option >< option  value ="" > 南阳市 </ option >< option  value ="" > 商丘市 </ option >< option  value ="" > 信阳市 </ option >< option  value ="" > 周口市 </ option >< option  value ="" > 驻马店市 </ option >< option  value ="" > 济源市 </ option >< option  value ="" > 武汉市 </ option >< option  value ="" > 黄石市 </ option >< option  value ="" > 襄樊市 </ option >< option  value ="" > 十堰市 </ option >< option  value ="" > 荆州市 </ option >< option  value ="" > 宜昌市 </ option >< option  value ="" > 荆门市 </ option >< option  value ="" > 鄂州市 </ option >< option  value ="" > 孝感市 </ option >< option  value ="" > 黄冈市 </ option >< option  value ="" > 咸宁市 </ option >< option  value ="" > 随州市 </ option >< option  value ="" > 恩施州 </ option >< option  value ="" > 仙桃市 </ option >< option  value ="" > 天门市 </ option >< option  value ="" > 潜江市 </ option >< option  value ="" > 神农架林区 </ option >< option  value ="" > 长沙市 </ option >< option  value ="" > 株洲市 </ option >< option  value ="" > 湘潭市 </ option >< option  value ="" > 衡阳市 </ option >< option  value ="" > 邵阳市 </ option >< option  value ="" > 岳阳市 </ option >< option  value ="" > 常德市 </ option >< option  value ="" > 张家界市 </ option >< option  value ="" > 益阳市 </ option >< option  value ="" > 郴州市 </ option >< option  value ="" > 永州市 </ option >< option  value ="" > 怀化市 </ option >< option  value ="" > 娄底市 </ option >< option  value ="" > 湘西州 </ option >< option  value ="" > 成都市 </ option >< option  value ="" > 自贡市 </ option >< option  value ="" > 攀枝花市 </ option >< option  value ="" > 泸州市 </ option >< option  value ="" > 德阳市 </ option >< option  value ="" > 绵阳市 </ option >< option  value ="" > 广元市 </ option >< option  value ="" > 遂宁市 </ option >< option  value ="" > 内江市 </ option >< option  value ="" > 乐山市 </ option >< option  value ="" > 南充市 </ option >< option  value ="" > 宜宾市 </ option >< option  value ="" > 广安市 </ option >< option  value ="" > 达州市 </ option >< option  value ="" > 眉山市 </ option >< option  value ="" > 雅安市 </ option >< option  value ="" > 巴中市 </ option >< option  value ="" > 资阳市 </ option >< option  value ="" > 阿坝州 </ option >< option  value ="" > 甘孜州 </ option >< option  value ="" > 凉山州 </ option >< option  value ="" > 昆明市 </ option >< option  value ="" > 曲靖市 </ option >< option  value ="" > 玉溪市 </ option >< option  value ="" > 保山市 </ option >< option  value ="" > 昭通市 </ option >< option  value ="" > 思茅地区 </ option >< option  value ="" > 临沧地区 </ option >< option  value ="" > 丽江地区 </ option >< option  value ="" > 文山州 </ option >< option  value ="" > 红河州 </ option >< option  value ="" > 西双版纳州 </ option >< option  value ="" > 楚雄州 </ option >< option  value ="" > 大理州 </ option >< option  value ="" > 德宏州 </ option >< option  value ="" > 怒江州 </ option >< option  value ="" > 迪庆州 </ option >< option  value ="" > 贵阳市 </ option >< option  value ="" > 六盘水市 </ option >< option  value ="" > 遵义市 </ option >< option  value ="" > 安顺市 </ option >< option  value ="" > 铜仁地区 </ option >< option  value ="" > 毕节地区 </ option >< option  value ="" > 黔西南州 </ option >< option  value ="" > 黔东南州 </ option >< option  value ="" > 黔南州 </ option >< option  value ="" > 西安市 </ option >< option  value ="" > 铜川市 </ option >< option  value ="" > 宝鸡市 </ option >< option  value ="" > 咸阳市 </ option >< option  value ="" > 渭南市 </ option >< option  value ="" > 延安市 </ option >< option  value ="" > 汉中市 </ option >< option  value ="" > 榆林市 </ option >< option  value ="" > 安康市 </ option >< option  value ="" > 商洛市 </ option >< option  value ="" > 兰州市 </ option >< option  value ="" > 金昌市 </ option >< option  value ="" > 白银市 </ option >< option  value ="" > 天水市 </ option >< option  value ="" > 嘉峪关市 </ option >< option  value ="" > 武威市 </ option >< option  value ="" > 张掖市 </ option >< option  value ="" > 平凉市 </ option >< option  value ="" > 酒泉市 </ option >< option  value ="" > 庆阳市 </ option >< option  value ="" > 定西地区 </ option >< option  value ="" > 陇南地区 </ option >< option  value ="" > 甘南州 </ option >< option  value ="" > 临夏回族自治州 </ option >< option  value ="" > 西宁市 </ option >< option  value ="" > 海东地区 </ option >< option  value ="" > 海北州 </ option >< option  value ="" > 海南州 </ option >< option  value ="" > 果洛州 </ option >< option  value ="" > 玉树州 </ option >< option  value ="" > 海西州 </ option >< option  value ="" > 银川市 </ option >< option  value ="" > 石嘴山市 </ option >< option  value ="" > 吴忠市 </ option >< option  value ="" > 固原市 </ option >< option  value ="" > 呼和浩特市 </ option >< option  value ="" > 包头市 </ option >< option  value ="" > 乌海市 </ option >< option  value ="" > 赤峰市 </ option >< option  value ="" > 通辽市 </ option >< option  value ="" > 鄂尔多斯市 </ option >< option  value ="" > 呼伦贝尔市 </ option >< option  value ="" > 乌兰察布盟 </ option >< option  value ="" > 锡林郭勒盟 </ option >< option  value ="" > 巴彦淖尔盟 </ option >< option  value ="" > 阿拉善盟 </ option >< option  value ="" > 兴安盟 </ option >< option  value ="" > 南宁市 </ option >< option  value ="" > 柳州市 </ option >< option  value ="" > 桂林市 </ option >< option  value ="" > 梧州市 </ option >< option  value ="" > 北海市 </ option >< option  value ="" > 防城港市 </ option >< option  value ="" > 钦州市 </ option >< option  value ="" > 贵港市 </ option >< option  value ="" > 玉林市 </ option >< option  value ="" > 百色市 </ option >< option  value ="" > 贺州市 </ option >< option  value ="" > 河池市 </ option >< option  value ="" > 来宾市 </ option >< option  value ="" > 崇左市 </ option >< option  value ="" > 拉萨市 </ option >< option  value ="" > 那曲地区 </ option >< option  value ="" > 昌都地区 </ option >< option  value ="" > 山南地区 </ option >< option  value ="" > 日喀则地区 </ option >< option  value ="" > 阿里地区 </ option >< option  value ="" > 林芝地区 </ option >< option  value ="" > 乌鲁木齐市 </ option >< option  value ="" > 克拉玛依市 </ option >< option  value ="" > 石河子市 </ option >< option  value ="" > 阿拉尔市 </ option >< option  value ="" > 图木舒克市 </ option >< option  value ="" > 五家渠市 </ option >< option  value ="" > 吐鲁番地区 </ option >< option  value ="" > 哈密地区 </ option >< option  value ="" > 和田地区 </ option >< option  value ="" > 阿克苏地区 </ option >< option  value ="" > 喀什地区 </ option >< option  value ="" > 克孜勒苏州 </ option >< option  value ="" > 巴音郭楞州 </ option >< option  value ="" > 昌吉州 </ option >< option  value ="" > 博尔塔拉州 </ option >< option  value ="" > 伊犁州 </ option >< option  value ="" > 塔城地区 </ option >< option  value ="" > 阿勒泰州 </ option >< option  value ="" > 九龙城区 </ option >< option  value ="" > 观塘区 </ option >< option  value ="" > 深水埗区 </ option >< option  value ="" > 黄大仙区 </ option >< option  value ="" > 湾仔区 </ option >< option  value ="" > 油尖旺区 </ option >< option  value ="" > 离岛区 </ option >< option  value ="" > 葵青区 </ option >< option  value ="" > 西贡区 </ option >< option  value ="" > 沙田区 </ option >< option  value ="" > 屯门区 </ option >< option  value ="" > 大埔区 </ option >< option  value ="" > 荃湾区 </ option >< option  value ="" > 元朗区 </ option >< option  value ="" > 澳门 </ option >< option  value ="" > 台北市 </ option >< option  value ="" > 高雄市 </ option >< option  value ="" > 基隆市 </ option >< option  value ="" > 台中市 </ option >< option  value ="" > 台南市 </ option >< option  value ="" > 新竹市 </ option >< option  value ="" > 嘉义市 </ option >< option  value ="" > 北县 </ option >< option  value ="" > 板桥市 </ option >< option  value ="" > 宜兰县 </ option >< option  value ="" > 宜兰市 </ option >< option  value ="" > 桃园县 </ option >< option  value ="" > 桃园市 </ option >< option  value ="" > 新竹县 </ option >< option  value ="" > 竹北市 </ option >< option  value ="" > 苗栗县 </ option >< option  value ="" > 苗栗市 </ option >< option  value ="" > 台中县 </ option >< option  value ="" > 丰原市 </ option >< option  value ="" > 彰化县 </ option >< option  value ="" > 彰化市 </ option >< option  value ="" > 南投县 </ option >< option  value ="" > 南投市 </ option >< option  value ="" > 云林县 </ option >< option  value ="" > 斗六市 </ option >< option  value ="" > 嘉义县 </ option >< option  value ="" > 太保市 </ option >< option  value ="" > 台南县 </ option >< option  value ="" > 新营市 </ option >< option  value ="" > 高雄县 </ option >< option  value ="" > 凤山市 </ option >< option  value ="" > 屏东县 </ option >< option  value ="" > 屏东市 </ option >< option  value ="" > 澎湖县 </ option >< option  value ="" > 马东市 </ option >< option  value ="" > 台东县 </ option >< option  value ="" > 台东市 </ option >< option  value ="" > 花莲县 </ option >< option  value ="" > 花莲市 </ option >< option  value ="" > 金门县 </ option >< option  value ="" > 连江县 </ option >
</ select >
< script  type ="text/javascript" >
<!--
    var ddlCity = document.getElementById("ddlCity");
    var ddl1=new FilterDDL(ddlCity);
    ddl1.init();
//-->
</ script >
  </ body >
</ html >

转载于:https://www.cnblogs.com/Don/archive/2007/09/03/880366.html