2025年javascript实现下拉列表框显示（输入拼音头显示选项）

科技前沿 • 2025-04-01 18:09 • 阅读 46

大家好，我是讯享网，很高兴认识大家。

客户提出输入拼音头，下拉列表框打开，焦点在拼音头为对按下字母的那条子项上按回车键则选中此子项。这点如同在OICQ中搜索名字，按下一个字母键，则第一个字母为此字母的单词或汉字就为当前的选项。还有，如：在选项中有“张三”“张三火”两个人名用户按下"z""s""h"三个字后当前显示的选项就为“张三火”.

讯享网

< script src =qswhGB2312.js ></ script >

只能实现部分中文

< input value ="秋水无恨 <>#%{}|^~[]`&?+Abc" name =source >

< input type =button value =显示 onclick =trans() >

< div id =result ></ div >

< input name =demo size =30 value ="实用,编程,技术,实战,精通,教程" >

< input type =button onclick =sort(demo.value) value =排序 >

< script language =javascript > ...

function trans()...{

result.innerHTML="结果如下："

result.innerHTML+='<br>UrlEncode(source.value):<br>'+UrlEncode(source.value)

result.innerHTML+='<br>getSpell(source.value):<br>'+getSpell(source.value)

result.innerHTML+='<br>getSpell(source.value,"'"):<br>'+getSpell(source.value,"'")

}

function spellSort(a,b)...{

var p=strGB.indexOf(a.substr(0,1))

var q=strGB.indexOf(b.substr(0,1))

document.write(p,"-",q,"=",p-q,"<br>");

return p-q;

}

function spellSort(a,b)...{

///*(qiushuiwuhen 2002-9-17)**/

var i,p,q,l=strGB.length;

p=0;for(i=a.length;i>0;i--)p=p/l+strGB.indexOf(a.substr(i-1,1))

q=0;for(i=b.length;i>0;i--)q=q/l+strGB.indexOf(b.substr(i-1,1))

return p-q;

}

function sort(str)...{

var arr=str.split(","),arr2=[];

arr.sort(spellSort);

alert(arr)

}

</ script >

< br > 输入名字的首字缩写即可找到，如张三火(zsh)

< select name ="username" onkeydown =spellList() onchange =alert(this[selectedIndex].sp) >

< option value ="1" > 张三 </ option >

< option value ="2" > 张三火 </ option >

< option value ="3" > 李四 </ option >

< option value ="4" > 李四水 </ option >

</ select >

< script > ...

var sel="",timer=null;

function spellList()...{

///**(qiushuiwuhen 2002-9-20)*/

with(window.event)...{

with(srcElement)...{

if(keyCode<48)return;

if(keyCode>95)keyCode-=48

sel+=String.fromCharCode(keyCode)

window.status=sel

for(i=0;i<length;i++)...{

if(!options[i].sp)...{

var tmp="",arr=getSpell(options[i].text,"'").split("'")

for(var j=0;j<arr.length;j++)tmp+=arr[j].substr(0,1).toUpperCase();

options[i].sp=tmp;

}

if(options[i].sp.indexOf(sel)==0)...{selectedIndex=i;break;}

}

returnValue=false;

clearTimeout(timer)

timer=setTimeout("sel=''",500);

}

</ script >

2025年javascript实现下拉列表框显示（输入拼音头显示选项）

相关推荐