小露一手：按拼音检索下拉框选项

最新推荐文章于 2020-08-08 10:28:40 发布

treeClimber

最新推荐文章于 2020-08-08 10:28:40 发布

阅读量5.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： WEB开发技巧原创经典文章标签： function javascript input button 测试

本文链接：https://blog.youkuaiyun.com/treeClimber/article/details/942043

WEB开发技巧同时被 2 个专栏收录

26 篇文章

订阅专栏

原创经典

22 篇文章

订阅专栏

本文介绍了一种按拼音检索下拉框选项的方法，通过JavaScript实现了快速定位和筛选功能，适用于需要按汉字拼音首字母进行搜索的应用场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

测试页面：

<script language=javascript src="拼音检索.js"></script>
<body οnlοad="initSelect(myselect)">
<input name="shengmu" οnkeydοwn="return toUpperText(this)">(声母)
<input type="button" value="查找" οnclick="findByCapital(shengmu,myselect)"><BR>
<select name="myselect" οnkeydοwn="quickSelect(this)">
   <option value="">人猿泰山
   <option value="">中南海保镖
   <option value="">神话
   <option value="">战警
   <option value="">大话西游
   <option value="">喜剧之王
   <option value="">母亲
   <option value="">倚天屠龙记
   <option value="">南北少林
   <option value="">霸王别姬
   <option value="">精武英雄
   <option value="">龙在天涯
</select>(第一个字)
</body>

以下是“拼音检索.js”

/*
@author:　熊水林(xionglb@163.com)
@lastModified:　2006-7-19
@descript:　按拼音检索下拉框选项
*/
document.write('<script language=javascript src="../GBHZ2PY.js"></script>');
var piny = new Array();
var capital = new Array();
function initSelect(combox){
    var firstHZ = "";
    var len = combox.length;
    for (var i=0; i<len; i++){
        firstHZ += combox.options[i].text.charAt(0);
    }
    firstHZ = firstHZ.split("").sort(pinyinSort);
    for (var i=0; i<firstHZ.length; i++){ //重新排列下拉框并转换首个汉字
       for (var j=0; j<len; j++){
           var optionObj = combox.options[j];
           if (firstHZ[i] == optionObj.text.charAt(0)){
              combox.add(new Option(optionObj.text,optionObj.value));
              combox.remove(j);
              len --;
           }
       }
       piny.push(pinyin(firstHZ[i]).toUpperCase());
    }
    for (var i=0; i<combox.length; i++){ //每个字的首个声母
        var text = combox[i].text;
        var shengmu = "";
        for (var j=0; j<text.length; j++){
           shengmu += pinyin(text.charAt(j)).toUpperCase().charAt(0);
        }
        capital.push(shengmu);
    }
}
function quickSelect(combox){
   var ch = String.fromCharCode(event.keyCode);
   for (var i=0; i<piny.length; i++){
      if (piny[i].substring(0,1)==ch){
         combox.selectedIndex = i;
         break;
      }
   }
}
function findByCapital(textObj,combox){
    var shengmu = textObj.value;
    var index = -1;
    while (shengmu.length>0 && index==-1){
       for (var i=0; i<combox.length; i++){
           if (capital[i].indexOf(shengmu) == 0){
              combox.selectedIndex = i;
              index = i;
              break;
           }
       }
       shengmu = shengmu.substring(0, shengmu.length-1);
    }
    if (index == -1){
       alert("未找到");
    }
}
//输入大写字母
function toUpperText(textObj){
    if (event.keyCode>=65 && event.keyCode<=90){
       textObj.value += String.fromCharCode(event.keyCode);
       return false;
    }
    return true;
}