这里提到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>
///拼音检索下拉列表的全部函数，开头必须引用jquery
function 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包去生成拼音
分享到：
相关推荐
在给定的标题“支持汉字、拼音、英文快速定位的jquery超级select插件”中，我们可以了解到这是一个专为jQuery设计的增强型下拉选择框插件。这种插件的目标是提升用户体验，特别是对于那些需要处理大量选项或者多语言...
《jQuery.Autocomplete 中文支持》 jQuery.Autocomplete 是一款广泛使用的 jQuery 插件，它为网页中的输入框提供了自动完成（autocomplete）和建议提示（input suggest）功能。这款插件通过 AJAX 方式动态加载数据...
stm32+esp8266+mqtt/onenet智能家居
Android开发不用存储权限进行拍照，得到拍照后的图片效果。有一点难度，关键是存储路径的定义。
j
反向Lora提高画面细节。
小秘书（凤凰电话管理系统）【纽曼声卡版小秘书】，主要用来做为来电自动录音功能。
基于SpringBoot的疫情居家检测管理系统，系统包含三种角色：管理员、用户、医生，主要功能如下。 【用户功能】 1. 首页：获取系统信息。 2. 论坛：参与居民讨论和分享信息。 3. 公告：查看社区发布的各类公告。 4. 医保信息：了解医疗保障相关信息。 5. 个人中心：管理个人信息，查看预约和就诊历史。 【管理员功能】 1. 首页：查看系统整体。 2. 个人中心：管理管理员的个人信息。 3. 管理员管理：维护系统管理员的账户信息。 4. 医生管理：添加、编辑和删除医生信息。 5. 用户管理：查看和管理系统用户的信息。 6. 预约管理：审核和管理用户对医生的预约服务。 7. 就诊历史管理：查看和管理用户的就诊历史记录。 8. 健康信息管理：记录和查看用户的健康信息。 9. 药品管理：管理系统内的药品种类。 10. 药品入库管理：记录和管理药品的入库情况。 11. 药品使用管理：记录和管理药品的使用情况。 12. 医保信息管理：管理医保相关信息。 13. 论坛管理：审核和回复用户在论坛上的帖子。 14. 公告管理：发布、编辑和管理公告信息。 15. 基础数据管理：管理系统的基础数据。 16. 轮播图信息：管理系统首页的轮播图展示。 【医生功能】 1. 首页：查看医生个人信息。 2. 个人中心：管理医生的个人信息。 3. 预约管理：查看和管理用户对医生的预约服务。 4. 就诊历史管理：查看和管理用户的就诊历史记录。 5. 健康信息管理：记录和查看用户的健康信息。 6. 药品管理：管理系统内的药品种类。 7. 药品入库管理：记录和管理药品的入库情况。 8. 药品使用管理：记录和管理药品的使用情况。 9. 医保信息管理：管理医保相关信息。 10. 论坛管理：审核和回复用户在论坛上的帖子。 11. 公告管理：发布、编辑和管理公告信息。 12. 轮播图信息：管理系统首页的轮播
基于python的Opencv项目实战.zip
鸿蒙开发画廊效果功能，中间大，两边小的浏览效果，难度不小，进行了一定的封装。很好看的画廊效果
win32汇编环境,网络编程入门之十九
linux
【HD-RK3576-PI】定制用户升级固件
内容概要：本文是关于大规模L1正则化线性分类优化方法和软件比较的补充材料，由台湾大学计算机科学系的研究团队撰写。文章详细介绍了GLMNET算法的核心公式推导及其具体实现步骤，包括如何计算L¯j(0; X˜)，以及如何维护关键变量以减少计算量。此外，文中对比了多种求解器（如CDN、IPM、TRON等）在不同数据集上的性能，涵盖达到特定停止准则所需时间、迭代次数及每次迭代的平均成本。研究结果显示，在大多数数据集上，CDN方法表现最优，但在极严格的条件下，IPM方法表现更好。对于L1和L2正则化的逻辑回归，文中指出L1正则化在某些数据类型上可能提供更好的准确性，但训练时间较长，因此推荐先尝试L2正则化用于分类任务，而L1正则化更适合特征选择。 适合人群：对机器学习算法尤其是正则化技术有一定了解的数据科学家和研究人员。 使用场景及目标：①需要进行大规模线性分类问题的优化；②比较不同优化方法和工具包在实际应用中的效果；③理解L1和L2正则化在逻辑回归中的区别及其适用情况。 其他说明：本文提供了详细的数学推导和实验结果分析，有助于深入理解各种优化方法的工作原理及其优劣。读者可以通过这些内容选择最适合自身需求的算法和工具包。
西电A测或通院微控温度仿真控制系统的proteus文件
华为ONT使能2.0工具
basalt_top
无极调速数控车床主轴箱装配CAD图.rar
乳液涂料生产流程图.rar
训练集数据