jquery实现仿select列表的即时搜索及拼音搜索
- - CSDN博客Web前端推荐文章这里提到select，其实不是select，而是用标签去仿造一个select，以实现对已有“option”的快速检索功能. 以标签代替select的选择框，以 标签代替option标签. 每个li标签附onclick触发js带参数的选取事件，所带参数即为option的value. 内附带显示text用的input标签，和隐藏的text的拼音input标签.
jquery实现仿select列表的即时搜索及拼音搜索
标签：
jquery
select
列表
| 发表时间：2013-08-31 00:13 | 作者：Wallbanger
出处：http://blog.csdn.net
这里提到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包去生成拼音
作者：Wallbanger 发表于2013-8-30 16:47:37 原文链接
阅读：59 评论：0 查看评论
相关 [jquery select 列表] 推荐：
user-select介绍
- - 前端观察之前在《 CSS的未来：一些试验性CSS属性》中有提到user-select这个属性，最近整理的时候有遇到，所以详细的了解了下，这里简单的介绍下. 这是在css3 UI规范中新增的一个功能，用来控制内容的可选择性. auto——默认值，用户可以选中元素中的内容. none——用户不能选择元素中的任何内容.
poll,select与epoll
- - 操作系统 - ITeye博客select的参数类型fd_set没有将文件描述符和事件绑定,它仅仅是一个文件描述符集合,因此select需要提供3个这种类型的参数来分别传入和输出可读,可写及异常等事件.这一方面使得select不能处理更多类型的事件,另一方面由于内核对fd_set集合的在线修改,应用程序下次调用select前不得不重置这3个fd_set集合.
jquery+json实现数据列表分页
- - CSDN博客Web前端推荐文章该实例中，新闻数据列表未使用表格显示. 下面将所有源码附上，其中用到jquery插件.