这里提到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包去生成拼音
分享到:
相关推荐
一个带下拉模糊搜索的select,替换下拉内容后即可直接使用,只需要把对应文件放到指定文件夹中引用即可
Jquery模拟select效果实现,纯自写,简单实用,可自行修改样式。
jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html jQuery div仿select下拉选项菜单美化获取html
jquery实现的select列表选择框选中美化效果源码.zip
jquery仿百度搜索框下拉列表 ,可实现自动模糊查询,显示已输入匹配信息
jQuery实现仿百度搜索时的下拉列表文档,最好自己研究再改一下
jquery下拉搜索 select2实现下拉搜索
jQuery下拉条select插件,拼音筛选,智能向上向下展开。 带查找输入框。 基于select2 Version: 3.3.2编写,增加汉语拼音筛选支持。 解压后可直接用浏览器打开看演示。 支持下列浏览器: * IE 8+ * Chrome 8+ * ...
* 模拟select * @param {box,tiggle} * @param box 父级别容器[模拟select最外围标签] * @param tiggle 展开事件 [*click | mouseover | 其他dom事件] * @return object 返回对象本身 * @disription 节点(html)内部...
好看的select下拉框(带搜索功能),由于默认select样式过丑而且有些东西还不好改,这个是利用input框和ul来实现一个下拉框的效果。分为不带搜索功能和带搜索功能两个部分。以及jquery与javascript两种实现
基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和JQuery实现仿PC文件管理源码.zip基于Bootstrap和...
jQuery手机下拉框select jQuery手机下拉框select jQuery手机下拉框select
jQuery实现select样式美化 jQselect.js
用jQuery实现了搜索List子项内容过滤的功能.
jquery select下拉菜单美化搜索框样式代码
jQuery仿百度搜索框下拉热门关键词列表代码,点击搜索框弹出下拉热门关键词列表,点击关键词进行快捷搜索。
jquery 实现的 select 上移、下移、左移、右移功能 下载下来直接预览效果
Jquery实现仿搜索引擎文本框自动补全插件