jquery实现仿select列表的即时搜索及拼音搜索
这里提到select，其实不是select，而是用<li><input>标签去仿造一个select，以实现对已有“option”的快速检索功能。
以<input>标签代替select的选择框，以<li>标签代替option标签。每个li标签附onclick触发js带参数的选取事件，所带参数即为option的value.<li>内附带显示text用的input标签，和隐藏的text的拼音input标签。思路就是这些。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>qqqun.21.777.12</title><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script><style type="text/css">/*拼音检索功能全部css*/#divselect{margin:0;position:relative;z-index:10000;background: #fff;text-aling:left;}#divselect ul{margin:0; padding:0}#divselect ul li{margin:0; height:22px; line-height:22px; border-bottom:1px solid grey; border-left:1px solid grey; border-right:1px solid grey; padding-left:5px; display: none; cursor: pointer; width: 300px;}#divselect ul li input{cursor: pointer;}#divselect input{height:22px; line-height:22px; padding:0px;}</style><script>///拼音检索下拉列表的全部函数，开头必须引用jqueryfunction showSoSo(){//显示搜索栏$('#soso').show();document.getElementById('soso').focus();$('#xbutton').show();}function hideSoSo(){//隐藏搜索栏$('#soso').hide();$('#xbutton').hide();$('#selectUl > li').hide();}function inputValue(value,text){//选中option$('#formName').attr('value',value);$('#seetext').attr('value',text);$('#sosoName').attr('value',text);$('#soso').attr('value',text);hideSoSo();}function soIt(){//搜索option列表var so = $("#soso").val();if(so.length>0){var kehuhz = document.getElementsByName('hzIndexs');var kehupy = document.getElementsByName('pyIndexs');var lis = document.getElementById('selectUl').getElementsByTagName('li'); for(var c=0;c<kehuhz.length;c++){if(kehuhz[c].value.indexOf(so)>-1||kehupy[c].value.indexOf(so)>-1){lis[c].style.display='block';}else{lis[c].style.display='none';}}}}</script></head><body><div id='divselect'><input type="text" id='seetext' style="width: 300px;" readonly="readonly" onclick="showSoSo()"/><input id='soso' type="text" style="width: 300px;margin-left:-306px;display: none;" onkeyup="soIt()"/><input type="button" id='xbutton' value="x" class='button3' style="display: none;" onclick='hideSoSo()'><ul id="selectUl"><li onclick="inputValue(1,'选项一')"><input name='hzIndexs' value='选项一' type="text" style="width:100%;border: 0px;" readonly="readonly"/><input name='pyIndexs' value='xuanxiangyi' type="hidden" readonly="readonly"/></li><li onclick="inputValue(2,'选项二')"><input name='hzIndexs' value='选项二' type="text" style="width:100%;border: 0px;" readonly="readonly"/><input name='pyIndexs' value='xuanxianger' type="hidden" readonly="readonly"/></li><li onclick="inputValue(3,'北京大学')"><input name='hzIndexs' value='北京大学' type="text" style="width:100%;border: 0px;" readonly="readonly"/><input name='pyIndexs' value='beijingdaxue' type="hidden" readonly="readonly"/></li><li onclick="inputValue(4,'清华大学')"><input name='hzIndexs' value='清华大学' type="text" style="width:100%;border: 0px;" readonly="readonly"/><input name='pyIndexs' value='qinghuadaxue' type="hidden" readonly="readonly"/></li></ul></div><!--实际提交表单时用的隐藏域 测试时可写成type=text显示以供测试--><input type="hidden" name='formName' id='formName' readonly="readonly"/></body></html>至于拼音的生成肯定不是手打的，一般option列表都是后台传过来的list用jstl标签去迭代，后台可以用pinyin4j.jar包去生成拼音